100％屏幕高度css [英] 100% screen height css
本文介绍了100％屏幕高度css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个标题元素和一个内容元素：
I have a header element and a content element:
#header
#content
我想要的标题是固定的高度和内容填充屏幕上可用的所有剩余高度， code> overflow-y：scroll; 。
I want the header to be of fixed height and the content to fill up all the remaining height available on the screen, with overflow-y: scroll;.
这可能没有Javascript？感谢。
It this possible without Javascript? Thanks.
推荐答案
这里的诀窍是指定 height：100％; html 和 body 元素。
一些浏览器寻找父元素（ html ， body ）来计算高度。
The trick to this is specifying height: 100%; on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
这篇关于100％屏幕高度css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
