div的页眉

崩溃，我有几个嵌套的div：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和wrapper div正在折叠在标题和内容div上，如果我没有为body body设置固定高度，它会自行挂起。我拥有的唯一浮动元素是在标题中。

编辑：

如果我删除内容DIV（直接在身体下降的HTML元素）身体DIV停止崩溃！试图理解为什么 - 猜测这是由于内容div的位置：绝对。

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

我看了看this question但它似乎并不适用于我（或者我可能会清除错误的地方......）。

来源

2009-03-02 JohnIdol

您需要提供您正在使用的准系统css。 – cletus 2009-03-02 00:24:56

你是对的 - 完成！ :-) – JohnIdol 2009-03-02 00:38:16

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

以下实现了您最少量的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>

来源

2009-03-02 10:15:14 garrow

尝试清除您的浮动元素内的的标题。

<div id="wrapper"> 
    <div id="header"> 
    <!-- a bunch of float divs here --> 
    <div style="clear:both;"></div> <!-- Or use a clearfix... --> 
    </div> 

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

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

来源

2009-03-02 00:24:31

将“clear：both”样式添加到“body”ID的div中。你也可以在“一堆浮动div”之后并在关闭标题div的标记之前添加一个带有这种风格的div。

来源

2009-03-02 00:24:52 Stiropor

添加清除：对于body div来说，只会将body div放在正确的位置，但是header div仍然会因为内容不正常而被折叠。 – 2009-03-02 00:29:02

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

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

来源

2009-03-02 00:33:03 Alex

我用这个样式清除元件：

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

广场一片空地格在头，给头部元素尺寸：

<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中高一个字符，但仍将高度保持为零。

来源

2009-03-02 00:34:04 Guffa

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

尝试类似：

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

来源

2009-03-02 00:35:24 Allan

这不适用于ie6 – Alex 2009-03-02 13:55:47

试试这个。注意：头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>

来源

2009-03-02 00:42:58 cletus

如果你想＃内容到边境范围内出现#wrapper指定试穿尺寸为这个交换，您从#body position:relative（或删除完全DIV）后：

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

通过这种方式，您将能够看到#content在包装中显示，但在#header下显示。

可能会发生这种情况，因为＃内容确实没有任何内容可以展示出来。 #header，当它被设置为相对时，即使#body然后被设置为绝对，其后代被设置为相对，下面的类型也会消失。

将＃内容从position:absolute更改为position:relative将使其位于先前的DIV下，在此例中为#header。

来源

2009-03-02 01:16:18 random

谢谢 - 位置：相对于＃内容类型的作品（不删除＃body div，我需要它！） – JohnIdol 2009-03-02 09:25:22

回答

相关问题