使DIV最大高度等于“窗口高度 - 100px”

Question

有一种方法可以在max-height中设置%，但是在这里可以设置DIV最大高度，所以它比仅有CSS的窗口高度小100px？

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

Answer 1

是：

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

这使用CSS calc()函数从100px中减去100vh（1vh是视口高度的百分之一）并使用结果作为height属性的值。

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

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

参考文献：

• calc()。
• CSS lengths。

Answer 2

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

设置最小高度，以免您的动态内容生效，并以百分比表示动态结果。