本文介绍了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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!