html div 高度不包括子 div

发布于 2024-12-18 02:13:25 字数 1793 浏览 2 评论 0原文

我试图做到这一点，以便我可以通过将几个 div 放在另一个 div 中来在它们后面获得背景。问题是，父 div 没有增长到其子 div 的高度。由于该网站的内容将是动态的，因此我需要父 div 来增长。我通过在其他三个 div 下面放置一个 div 并将其clear属性设置为两个来临时修复它，但这只会弄乱间距。这是代码。

<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;
}

原文

Im trying to make it so that I can have a background behind a few divs by putting them inside of another div. The problem is, the parent div isnt growing to the height of its children divs. Since the content of this site is going to be dynamic, I need the parent div to grow. I made a makeshift fix for it by placing a div below the three other divs and settings its clear property to both, but that just messes up spacing. Heres the code.

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

   </div>

And here is the 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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怪我闹别瞎闹 2024-12-25 02:13:25

查看这篇关于“如何在没有结构标记的情况下清除浮动”的文章。然后添加 < code>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]-->

Take a look at this article on "How To Clear Floats Without Structural Markup". Then add the clearfix class to your #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]-->

回复收藏 0 原文

~没有更多了~