让div扩展到它的内容的高度

时间:2016-05-06 14:21:32

标签: html css

所以我正在尝试重新设计我的网站,以便将标题保持在屏幕顶部,让页面的其余部分在其下方滚动。我做了一些研究,发现了一个很好的JSfiddle解释了我需要做的事情:http://jsfiddle.net/austinbv/2KTFG

#header {
    position: fixed;
    top: 0px;
    height: 20px;
    width: 100%;
    background: green;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }
<div id='header'>hello</div>
<div id='body'>skdfl</div>  

我将2个DIV添加到Dreamweaver模板,然后是CSS。然后我将我的页面分成两部分,并将每个部分放在相应的DIV中。现在,当我在浏览器中查看页面时,底部div拒绝扩展到足以显示其中的内容。它停在屏幕的底部,而不是内容的底部。请参阅http://www.rcda.org:81/index2.html

上的示例

我研究了网,发现人们说DIV的内容以某种方式浮动并高于div,导致div不扩展。我没有浮动内容。

如何让body div扩展到其内容的高度?

2 个答案:

答案 0 :(得分:2)

在你的div#body(随机div ..)上,你有overflow:hidden - 高度固定,隐藏在固定高度以下的任何东西。

答案 1 :(得分:0)

脱掉溢出:隐藏;在index2.html的身体css上

#body {
    margin-left: auto;
    margin-right: auto;
    margin-top: 203px;
}