Question

我有一些嵌套的div：

<div id="wrapper">
  <div id="header">
    <!-- a bunch of float divs here -->
  </div>

  <div id="body">
    <div id="content">
      <!-- a bunch of html controls here -->
    </div>
  </div>
</div>

包装样式：width: 780px; margin: 20px auto; border: solid black 5px;
标题样式：position: relative; min-height: 125px;
体型：position: relative;
内容样式：position: absolute; left: 50px; top: 0px;

我在内容div中有一堆html元素，由于某种原因，body div和包装div在标题周围折叠，如果我没有设置固定高度，内容div会自行挂起身体div。我所拥有的唯一浮动元素位于标题中。

修改：

如果我删除了内容div（并直接在主体中删除html元素），则body div会停止折叠！试图理解为什么 - 猜测它是由于位置：内容div的绝对值。

任何线索为何会发生这种情况以及如何解决？

我看了this question但它似乎对我不起作用（或者我可能在错误的地方清理......）。

Answer 1

试试这个。注意：标题div上隐藏的溢出解决了清除div的需要。请注意确定为什么要对内容使用相对+绝对定位。利用余量imho可以更好地处理。

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    #wrapper { width: 780px; margin: 20px auto; border: solid black 5px; }
    #header { overflow: hidden; background-color: yellow; }
    #header div { float: right; border: 2px solid red; }
    #body { position: relative; }
    #content { position: absolute; left: 50px; top: 0px;  }
  </style>
</head>
<body>
    <div id="wrapper">
      <div id="header">
        <div>One</div>
      <div>Two</div>
      <div>Three</div>
      </div>
      <div id="body">
        <div id="content">
          <p>This is some text</p>
        </div>
      </div>
    </div>
</body>
</html>

Answer 2

在这种情况下，您不需要使用绝对或相对定位。

以下通过最少量的css争吵实现了您的需求颜色因为我喜欢颜色，你也应该这样！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Page Title</title>
        <style type="text/css" media="screen">
    #wrapper { 
        width: 780px; 
        margin: 20px auto; 
        border: solid black 5px;

    }
    #header { 
        min-height: 125px; 
        overflow:hidden;

    }
    #body { 
        background-color:red; 

    }
    #content { 
        margin-left: 50px;
        margin-top: 0px;
        background-color:pink; 

     }
.floatie { float:left; width:40px; height :40px; 
    margin:5px; background-color:#fe0;}

        </style>


    </head>
    <body>



        <div id="wrapper">
          <div id="header">
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
                <div class="floatie"></div>
          </div>

          <div id="body">
            <div id="content">

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                    sed do eiusmod tempor incididunt ut labore et dolore 
                    magna aliqua. Ut enim ad minim veniam, quis nostrud 
                    exercitation ullamco laboris nisi ut aliquip ex ea 
                    commodo consequat. Duis aute irure dolor in 
                    reprehenderit in voluptate velit esse cillum dolore eu 
                    fugiat nulla pariatur. Excepteur sint occaecat 
                    cupidatat non proident, sunt in culpa qui officia 
                    deserunt mollit anim id est laborum.</p>
            </div>
          </div>
        </div>

    </body>
</html>

Answer 3

我使用此样式清除元素：

.Clear { clear: both; height: 0; overflow: hidden; }

在标题中放置一个清除div，以给出标题元素大小：

<div id="wrapper">
  <div id="header">
    <!-- a bunch of float divs here -->
    <div class="Clear"></div>
  </div>

  <div id="body">
    <div id="content">
      <!-- a bunch of html controls here -->
    </div>
  </div>
</div>

将清除元素的高度设置为零会导致它自身不占用空间。溢出样式是这样的，即使高度设置为零，IE也不会给它一个高度。 IE有一个奇怪的想法，每个元素必须至少有一个字符高，设置溢出：隐藏;保持高度为零，尽管元素的内容在IE中是一个字符高。

Answer 4

如果您希望#content显示在#wrapper的边界内，请在从#body中删除position:relative（或完全删除该DIV）之后尝试使用此替换大小：

#header{position: relative; overflow:hidden; clear:both;}
#content{position:relative; left:50px; top:0px;}

通过这种方式，您可以看到#content在包装器中显示但在#header下方。

可能会发生，因为#content实际上没有任何内容可以从下面突出。 #header，当它被设置为relative时，下面会消失，即使#body被设置为绝对值，其后代也设置为相对值。

将#content从position:absolute更改为position:relative会将其置于之前的DIV之下，在本例中为#header。

Answer 5

尝试在标题中的浮动元素后清除。

<div id="wrapper"> <div id="header">  <div style="clear:both;"></div>  </div> <div id="body"> <div id="content">  </div> </div> </div>

只要清除元素在包含div中，它就应该完成你想要的。

Answer 6

使用“body”id为你的div添加样式“clear：both”。您也可以在“一堆浮动div”之后和关闭标题div的标记之前添加一个具有此样式的div。

Answer 7

当你想要清除某些东西时，你还需要浮动该元素以使其正常工作。所以你需要。

#header { clear: both; float: left; }
#body { clear: both; float: left; }

Answer 8

如果不是完全需要的话，我不喜欢使用“clear：both”。更好的解决方案是将折叠DIV的“溢出”属性设置为“自动”。

尝试类似：

#header { float: left; overflow: auto; }

divs在标题周围坍塌

8 个答案: