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

回答

相關問題