頁面佈局中的自動div高度調整

我試圖設計一個使用無表格佈局的網頁;但是，當涉及到頁面的高度時，我遇到了問題。我使用jquery手風琴來儘量減少頁面中滾動條的使用。但是，當我摺疊手風琴時，我正在經歷div的重疊。手風琴部分與頁面的底部邊緣重疊並與頁腳重疊。我如何自動調整頁面的高度，而不會與頁面中其他div的重疊。頁面佈局中的自動div高度調整

就好像你可以附加的圖像是我做的基本佈局。頁面的內容部分將被動態填充;所以我需要自動調整內容div的使用css

謝謝！ Nhoyti alt text http://img13.imageshack.us/img13/9438/layoutfq.jpg

這裏是我所做的html代碼;你能幫我解決嗎？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
html, body 
{ 
    margin:0px; 
    padding:0px; 
    } 

#pageholder 
{ 
    width:980px; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    border:solid 1px #000; 
    } 

#header 
{ 
    width:978px; 
    height:120px; 
    border:solid 1px red; 
    text-align:center; 
    } 

#navigation 
{ 
    width:200px; 
    height:720px; 
    margin:5px; 
    border:solid 1px cyan; 
    text-align:center; 
    } 


#contents 
{ 
    width:700px; 
    height:720px; 
    margin:5px; 
    margin-left:270px; 
    margin-top:-724px; 
    border:solid 1px blue; 
    text-align:center; 
    } 

#footer 
{ 
    width:970px;  
    height:50px; 
    border:solid 1px green; 
    text-align:center; 
} 
</style> 
</head> 

<body> 
<div id="pageholder"> 

<div id="header">header</div> 
<div id="navigation">navigation</div> 
<div id="contents">contents</div> 
<div id="footer">footer</div> 

</div> 
</body> 
</html>

來源

2010-07-13 nhoyti

如果你有任何CSS規則在那裏漂浮，你會想記住清除：在div的問題之後。這應該停止重疊（如果你使用浮動，並沒有清除它）。你可以做一些鏈接：

<br style="clear:both">

來源

2010-07-13 02:15:50 John

有幾件事情要記住，當你處理的頁面高度：

首先，默認情況下，內容通常會顯示，如果它延伸超過其容器的給定高度，爲了正確執行滾動操作，您應該在#navigation和#content div上有overflow-y:scroll。

其次，你設置了相當高的一點。標題爲120px高，再加上720 + 10頁邊距（5頂部，5底部）的導航欄，在頁腳之前增加了50個頁面。總共900頁，這是一個很好的例子。目前常見的解決方案是1280x1024，但您必須記住瀏覽器吃了很多高度;大概在200px的區域。您可能會在頁面上分配太多高度。

第三，在#contents div上分配一個大量的負邊距是有點奇怪的。 margin-top的負值會將頁面元素向上移動，因此您要告訴瀏覽器執行的操作是將#contents向上移動724px，這應該會將其放在屏幕頂部一半以上。那是你打算做什麼的？

最後，通常不需要指定容器的高度。默認情況下，根本沒有高度樣式，瀏覽器足夠聰明，可以使容器尺寸合適並且不會重疊。您可能需要刪除#contents和#navigation上的高度和負邊距頂端樣式，以解決您的問題，除非您確實需要導航或內容完全達到此高度。

來源

2010-07-13 03:29:28

頁面佈局中的自動div高度調整

回答

相關問題