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

回答

相關問題