浮動的div不會完全展開

我正在嘗試設計一個頁面佈局，其中兩個浮動的divs用於我的內容區域和邊欄。我的佈局問題是，我測試了其中一個浮動的文本內容很多divs，但它不展開顯示所有的內容。最後一段似乎與我的頁腳重疊浮動的div不會完全展開

我已經將overflow: auto添加到包含div，但它似乎不起作用。有任何想法嗎？

<body> 

<div id="header"> 
</div><!--ends header--> 

<div id="navbar"> 
</div><!--ends navbar--> 

<div id="wrapper"> 

    <div id="content"> 

     <div class="post"> 
     <p> Long content tested here</p> 
     </div><!--ends post--> 

    </div><!--ends content--> 

    <div id="sidebar"> 
    </div><!--ends sidebar--> 

    <div id="footer"> 
    </div><!--ends footer--> 

</div><!--ends wrapper--> 

</body>

此處的CSS：

html{ 
    height:100%; 
    background:url(images/green-bamboo2.jpg); 
    background-attachment:fixed; 
} 

body{ 
    height:100%; 
    width:80%; 
    margin: 0 auto; 
    padding:0; 
    background:#FFFFFF; 
} 

#header, #navbar, #content, #sidebar, #footer{ 
    display:block; 
} 

#header{ 
    height:100px; 
} 

#navbar{ 
    height:50px; 
    background:#CCCCCC; 
} 

#wrapper{ 
    min-height:100%; 
    background:#FFFFFF; 
    position:relative; 
    overflow:auto; 
} 

#content{ 
    float:left; 
    width:60%; 
    height:auto; 
    background:#99CC00; 
} 

#sidebar{ 
    float:right; 
    width:40%; 
    height:200px; 
    background:#09F; 
} 

#footer{ 
    clear:both; 
    height:150px; 
    background:#339933; 
    position:absolute; 
    bottom:0; 
    width:100%; 
}

來源

2012-05-10 Harry

您的DIV高度設置爲auto;這很好，但是你的頁腳div是絕對定位的，這意味着當另一個div開始重疊時它不會移動。如果你把它定位：相對來說，它應該隨着你的div變大而移動。

來源

2012-05-10 21:09:41 Ryan

工作就像一個魅力。非常感謝。 – Harry

你的CSS有一個問題。

您在#footer上同時使用了clear和position:absolute。因此，它不使用clear屬性。

編輯：見http://jsfiddle.net/WTpAx/1/看到它會是什麼，如果你從#footer和min-height:100%從#content刪除position:absolute等。

來源

2012-05-10 21:10:13

清除甚至不需要在這裏使用。 div的位置不在頁面的左側或右側，而是與內容重疊。他只需要改變他的位置，他將能夠看到他的所有內容。 – Ryan

不，使用float會從文檔流中刪除它的邊欄和內容，因此，如果他只是使用相對於'＃footer'的位置，它就會在標題旁邊結束。 –

似乎Py的說法並不清楚：在我的頁腳上。一旦它的位置是相對的，它只會將它移動到頁眉旁邊（頁腳）。非常感謝幫助傢伙！ – Harry

浮動的div不會完全展開

回答

相關問題