使DIV的最大高度等于“窗口高度-100像素”

Question

有一种方法可以使用%来设置max-height，但是否有一种方式可以使用CSS设置DIV的最大高度，使其比窗口高度小100像素？

它不能是固定布局，用户必须能够垂直滚动页面，但DIV始终应调整为window height - 100px。这可能吗，还是我必须使用JS？

- Silver Light

Answer 1

是的：

#specificElement {
    height: calc(100vh - 100px);
    box-sizing: border-box;
}

使用CSS的calc()函数从100vh（1vh是视口高度的1%）中减去100px，并将结果用作height属性的值。

box-sizing强制浏览器在计算元素的height时包括padding和border。

显然，根据您的用例使用相关的选择器。

参考资料：

• calc()。
• CSS长度。

- David Thomas

---

如果我使用calc(100vh-100px)而不是calc(100vh - 100px)，它就无法正常工作。希望能对某些人有所帮助。 - Back2Lobby

Answer 2

#specificElement { height: calc(100vh - 100%); min-height: calc(100vh - 100px); }

设置最小高度，以便您的动态内容不受影响，并以百分比为动态结果提供高度。

- Sami Khan