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没有高度的原因之一是因为它有内部文件流中没有的子元素，因为它们是浮动的。如果你把另一个元素放在没有浮动的内部，那么div的高度将会扩展，正如你在这里看到的那样http://jsfiddle.net/68FFL/3/

子DIV不会显示在父DIV内

1 个答案: