使DIV的最大高度等于“窗口高度-100px” [英] Make DIV max-height equal to `window height - 100px`

问题描述

有一种方法可以将 max-height 设置为％，但是这里有任何方法可以设置DIV max -height，因此仅使用CSS会比窗口高度小100px吗？

There is a way to set max-height in %, but is here any way to set DIV max-height, so it would be 100px smaller than window height with only CSS?

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

It must not be a fixed layout, user must be able to scroll page vertically, but DIV always should be resized to window height - 100px. Is this possible, or will I have to use JS for that?

推荐答案

是：

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

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

This uses the CSS calc() function to subtract 100px from 100vh (1vh being one percent of the view-port's height) and uses the result as the value of the height property.

框大小会强制浏览器包含填充和边框，在元素的高度中计算。

The box-sizing forces the browser to include padding, and borders, in the calculated height of the element.

显然，请使用相关的选择器-

Obviously use a relevant selector for your use-case.

引用：

• calc（） 。


• CSS长度。

• calc().
• CSS lengths.

这篇关于使DIV的最大高度等于“窗口高度-100px”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！