Html 子DIV不会显示在父DIV内部

好吧，我的问题是，#main#u content是#content的子内容，但它不会显示在#content中。我需要将#内容垂直扩展到#主内容的大小。而且，#内容是#主#包装的一部分，它应该一直延伸到#页脚。任何帮助都将不胜感激

#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>

#主包装{
宽度：850px；
边缘顶部：15px；
右边距：自动；
边缘底部：0px；
左边距：自动；
}
#顶{
宽度：850px；
高度：288px；
}
#顶级内容{
宽度：850px；
高度：250px；
}
#导航{
背景色：#333；
高度：38px；
#内容{
宽度：850px；
填充顶部：15px；
垫底：15px；
}
#主要内容{
字体：100%/1.4 Verdana，Arial，Helvetica，无衬线；
浮动：左；
宽度：850px；
高度：自动；
}
#页脚{
浮动：左；
宽度：100%；
高度：250px；
背景图片：url（images/footer\u bg\u blue.png）；
背景重复：重复-x；
边缘底部：0px；
左边距：0px；
右边距：0px；
文本对齐：居中；
}
#页脚（续）{
填充顶部：15px；
垫底：15px；
}
你好，世界
Lorem ipsum dolor sit amet，Concertetur adipiscing Elite.Aenean libero risus，Tincidant a placerat vel，Dignessim eget ligula.Mauris lobortis Adipis orci，ut scelerisque nibh rhoncus nec.在metus ante，bibendum ac hendrerit et，Vulpute id dolor.在ipsum Molestite tempus.上的Sed et tellus.但是vitae Vulpute sem.Sed Sed ipsum Elite，eget adi在利古拉港的大酒瓶和小酒瓶里，酒瓶和小酒瓶里的酒和小酒瓶里的酒。酒瓶和小酒瓶里的酒。酒瓶和小酒瓶里的酒。酒瓶和小酒瓶里的酒。酒瓶和小酒瓶里的酒。酒瓶和小酒瓶里的酒。酒瓶和小酒瓶里的酒。酒瓶和小酒瓶里的酒在mauris bibendum interdum的Phasellus pharetra urna。Pelletsque Pelletsque eros，eu Adipiscus Lectum id.Nullam iaculis，nisi拍卖人tincidunt hendrerit，在cursus quam ac leo的accumsan Elite的eros quam accumsan

测试

你可以为你的#content div指定

overflow:hidden；

将其高度一直扩展到页脚，正如你在这个jsFiddle上看到的那样。我不太清楚为什么会这样。如果你查看WordPress.com，你会发现他们使用这个规则来扩展他们的#main div，否则它就没有你的高度了

---

我不完全确定，但我认为之所以“content div”没有高度，原因之一是它的子元素不在文档流中，因为它们是浮动的。如果你在其中放入另一个没有浮动的元素，那么div的高度会扩大，正如你在这里看到的，

你是什么意思“不会显示"？如果样式没有显示，那么您可能会忘记包含.css文件。扩展到垂直100%可能会很棘手…需要记住的是，高度必须继承并向下渗透元素才能正常工作。因此，如果您将#content _wrap设置为relative&250px；那么您可以将#content#设置为height:100%，并且应该输入herit 250px你知道你的导航规则块没有右大括号，对吗？而且，你给我们的代码中没有关闭主换行div。。。