html - 子 DIV 不会显示在父 DIV 内部

Question

好的，我的问题是#main_content 是#content 的子元素，但它不会显示在#content 中。我需要#content 垂直扩展到#main_content 的大小。此外，#content 是#main_wrap 的一部分，它应该一直延伸到#footer。任何帮助将不胜感激。

#main_wrap {
    width: 850px;
    margin-top:15px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#top {
    width: 850px;
    height: 288px;
}
#top_content {
    width:850px;
    height:250px;
}
#nav {

    background-color:#333;
    height:38px;

#content {
    width:850px;
    padding-top:15px;
    padding-bottom:15px;
}



#main_content {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;   
    float:left;
    width:850px;
    height:auto;

}

#footer {
    float: left;
    width:100%;
    height:250px;
    background-image:url(images/footer_bg_blue.png);
    background-repeat:repeat-x; 
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    text-align:center;
}
#footer_cont {
    padding-top:15px;
    padding-bottom:15px;
}

<div id="main_wrap">
        <div id="top">
            <div id="top_content">

            </div>
            <div id="nav">



            </div>
        </div>
        <div id="content">
            <!--<div id="sidebar">

            </div>-->
            <div id="main_content">
            <h1>Hello World</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero risus, tincidunt a placerat vel, dignissim eget ligula. Mauris lobortis adipiscing orci, ut scelerisque nibh rhoncus nec. In metus ante, bibendum ac hendrerit et, vulputate id dolor. Sed et tellus at ipsum molestie tempus. Ut vitae vulputate sem. Sed sed ipsum elit, eget adipiscing magna. Sed et nisl eros, vitae convallis dui. Nullam nec feugiat nisi. Praesent in tortor ut enim molestie fermentum a et enim. Proin at porttitor ligula. Nulla vitae vulputate mauris. Donec auctor odio elit, vel egestas justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec suscipit pretium mollis. Sed egestas hendrerit quam eu pellentesque. Phasellus pharetra urna in mauris bibendum interdum. Pellentesque pellentesque pellentesque eros, eu adipiscing lectus fermentum id. Nullam iaculis, nisi auctor tincidunt hendrerit, eros quam accumsan elit, at cursus quam quam ac leo</p>
            </div>
        </div>
    <!--</div>-->
    <div id="footer">
        <div id="footer_cont">
            test
        </div>
    </div>

Answer 1

您可以为您的#content div 指定overflow: hidden; 以将其高度一直扩展到页脚，正如您在这个jsFiddle 中看到的那样，http://jsfiddle.net/68FFL/2/ .我不太确定为什么会这样。如果您查看 WordPress.com Mystique theme demo ，您会看到他们使用该规则来扩展他们的#main div，否则它没有像您那样的高度。

我不完全确定，但我认为你的#content div 没有高度的原因之一是因为它有不在内部文档流中的子元素，因为它们是 float 的。如果你在里面放另一个不 float 的元素，那么 div 的高度就会扩大，正如你在这里看到的，http://jsfiddle.net/68FFL/3/