CSS 使 DIV 最大高度等于 `window height - 100px`
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29211998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make DIV max-height equal to `window height - 100px`
提问by Silver Light
There is a way to set max-heightin %, but is here any way to set DIV max-height, so it would be 100px smaller than window height with only CSS?
有一种方法可以设置max-heightin %，但是这里有什么方法可以设置 DIV 最大高度，所以它会比仅使用 CSS 的窗口高度小 100px？
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?
它不能是固定布局，用户必须能够垂直滚动页面，但 DIV 始终应调整为window height - 100px. 这是可能的，还是我必须为此使用 JS？
回答by David says reinstate Monica
Yes:
是的：
#specificElement {
height: calc(100vh - 100px);
box-sizing: border-box;
}
This uses the CSS calc()function to subtract 100pxfrom 100vh(1vhbeing one percent of the view-port's height) and uses the result as the value of the heightproperty.
这使用 CSScalc()函数100px从100vh（1vh视口高度的百分之一）中减去， 并将结果用作height属性的值。
The box-sizingforces the browser to include padding, and borders, in the calculated heightof the element.
的box-sizing力的浏览器包括padding，和border秒，在计算出height的元件的。
Obviously use a relevant selector for your use-case.
显然，为您的用例使用相关的选择器。
References:
参考：
回答by Sami Khan
#specificElement {
height: calc(100vh - 100%);
min-height: calc(100vh - 100px);
}
#specificElement {
height: calc(100vh - 100%);
min-height: calc(100vh - 100px);
}
set min height so that your dyanmic content should not get effect and give height in percentage for dymanic result.
设置最小高度，以便您的动态内容不会受到影响，并以百分比形式给出动态结果的高度。
