Question

我试图通过将它们放在另一个div中来使我可以在几个div后面有一个背景。问题是，父div不会增长到其子div的高度。由于这个网站的内容将是动态的，我需要父div增长。我通过在其他三个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;
}

Answer 1

Take a look at this article on "How To Clear Floats Without Structural Markup".然后将clearfix课程添加到您的#content_container div。

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

html div高度不包括儿童div

1 个答案: