html div高度不包括小孩div

我试图让它可以通过把它们放在另一个div里面，在几个div后面有背景。问题是，母公司并没有发展到其子公司的高度。由于这个网站的内容将是动态的，所以我需要父div的增长。我通过在其他三个div下面放置一个div来为它做一个临时修复，并为它们设置了清晰的属性，但这只会增加间距。继承人的代码。html div高度不包括小孩div

<div id="content_container" style="clear:both;"> 
     <div id="container_left"> 
      <p>Left Container</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
     </div> 
     <div id="main_body"> 
      <p>Main Bod adf adsf asdf asd asdf asd dadf asd asd y</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
     </div> 
     <div id="container_right"> 
      <p>Right Container</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
     </div> 

    </div>

这里是CSS

/* CSS Document */ 
#container { 
    margin:auto; 
    background:#CFF 
} 
#body_container { 
    width:1200px; 
    margin:auto; 
} 
#header { 
    background:#CCC; 
    height:130px; 
} 
#main_header { 
    width:700px; 
    float:left; 
} 
#header_login { 
    margin-top:10px; 
    margin-right:10px; 
    float:right; 
    width:200px; 
} 
#header_login p { 
    margin:0; 
} 
#top_nav { 
    clear:both; 
    background:#06F; 
} 
#container_left { 
    float:left; 
    width:130px; 
} 
#container_right { 
    float:right; 
    width:130px; 
} 
#main_body { 
    margin-left:20px; 
    width:900px; 
    float:left; 
} 
#content_container { 
    background:#FFF; 
} 
#footer { 
    clear:both; 
}

来源

2011-11-27 Shaun

你应该把它变成JSfiddle –

呵呵？我不知道JSfiddle是什么 – Shaun

尝试设置float：留在#content_container上。如果内存在几个月前解决了这个问题，那么我遇到类似的问题。这只是一种预感。如果它有效，我会将它作为答案发布。 – ClarkeyBoy

Take a look at this article on "How To Clear Floats Without Structural Markup".然后clearfix类添加到您的#content_container股利。

<style type="text/css"> 

    .clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    } 

</style><!-- main stylesheet ends, CC with new stylesheet below... --> 

<!--[if IE]> 
<style type="text/css"> 
    .clearfix { 
    zoom: 1;  /* triggers hasLayout */ 
    } /* Only IE can see inside the conditional comment 
    and read this CSS rule. Don't ever use a normal HTML 
    comment inside the CC or it will close prematurely. */ 
</style> 
<![endif]-->

来源

2011-11-27 22:12:52

感谢您的链接，但设置浮动到父div修复它，并且更简单。好文章虽然阅读 – Shaun

html div高度不包括小孩div

回答

相关问题