好吧，我知道这个主题有很多问题，但我仍然无法确切地弄清楚如何完成这项工作。This接近问题，但它对我不起作用。
我希望我的页面具有 100% 的高度。此页面内有一个高度为 40 像素的静态标题，然后是占据剩余高度 (100% - 40 像素) 的内容。
HTML:
<body>
<div id="page">
<div id="header">
header
</div>
<div id="content">
content
</div>
</div>
</body>
CSS:
html, body
{
height: 100%;
margin: 0px;
}
#page
{
min-height: 100%;
}
#header
{
height: 40px;
}
#content
{
height: 100%;
position: absolute;
top: 0;
padding-top: 40px;
}
这是代码的解释：
I added position: absolute内容，否则它不会占据其容器的 100%#page因为某些原因
那么问题来了，它超出了页面的边界，这就是我添加top:0的原因。
然后内容为#content与标题重叠，所以我添加了padding-top: 40px
Now the #content再次超出页面边界
有什么建议么？谢谢。
这应该有效：
http://jsfiddle.net/94JNZ/1/
#content
{
height: auto;
width: 100%;
position: absolute;
top: 40px;
bottom: 0;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
