Div高度100％，不包括标题 [英] Div height 100% excluding header
问题描述
我希望我的页面具有100％的高度。在这个页面内部是一个高度为40px的静态标题，然后是剩余高度（100％ - 40px）的内容。
HTML：
$ b
<体>
< 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％;
位置：绝对;
top：0;
padding-top：40px;
}
这是对代码的解释：
-
我向内容添加了
position：absolute，否则它不会占用其容器的100％ code> #page 出于某种原因 -
然后问题在于它超出了页面的边界，这是为什么我加了top：0。
然后 -
现在
#content再次超过页面边界
#content 的内容与标题重叠，所以我添加 padding-top：40px 有什么建议吗？谢谢。
这应该是有效的：
#content
{
height：auto;
宽度：100％;
位置：绝对;
top：40px;
bottom：0;
}
Ok so I know this topic has many questions, but I still haven't been able to figure exactly how to make this work. This is close to the problem, but its not working for me.
I want my page to have 100% height. Inside this page is a static header of height 40px, and then content that takes the remaining height (100% - 40px).
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;
}
This is an explanation of the code:
I added
position: absoluteto content because otherwise it would not take up 100% of its container#pagefor some reasonThen the problem was that it exceeds the boundaries of the page, which is why I added top: 0.
Then the contents of
#contentoverlaps with the header so I addedpadding-top: 40pxNow the
#contentexceeds the boundaries of the page again
Any suggestions? Thanks.
This should work:
#content
{
height: auto;
width: 100%;
position: absolute;
top: 40px;
bottom: 0;
}
这篇关于Div高度100％，不包括标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
