遇到粘腳頁面佈局問題

我試圖用粘頁腳頁面和頁面寬度做頁面佈局。內容div應該是960px寬，並且高度應該從頁眉的底部到頁腳的頂部。它應該始終至少在這個高度。我現在面臨的問題是，我可以獲取內容div，或者是內容的高度，或者它擴展到包裝頁面的下方，即頁面應該結束的位置。遇到粘腳頁面佈局問題

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <style> 
html{ 
height: 100%; 
min-height: 100%; 
} 

body{ 
min-height: 100%; 
width: 100%; 
height:100%; 
} 

#wrap{ 
height:auto; 
height:100%; 
min-height:100%; 
position:relative; 
margin:auto; 
} 

#header{ 
background: blue; 
height: 152px; 
} 

#content{ 
background: #555; 
min-height: 100%; 
margin: 0 auto; 
width: 960px; 

} 

#footer{ 
margin-bottom: 41px; 
height: 59px; 
background: red; 
position:absolute; 
width:100%; 
bottom:0; 
} 
</style> 

</head> 
<body> 
    <div id ='wrap'> 
     <div id='header'> 
     </div> 
     <div id='content'> 
     </div> 
     <div id='footer'> 
     </div> 
    </div> 
</body>

來源

2011-08-07 Mike

我不明白你的意思的頂部，你可能要解釋它更清晰或者這只是我不理解它。 – Zhianc

這就是上面的代碼： [鏈接]（http://img21.imageshack.us/img21/8005/layout1qo.png）這是它應該是這樣的： [鏈接]（http：// img15.imageshack.us/img15/6369/layout2sp.png） – Mike

您應該使用position:relative下#wrap你的元素，所以他們會定位比較下對方，並設置高度爲100％是沒有幫助的。

您已設置的頁腳位置，絕對的，這將使它堅持到頁面

來源

2011-08-07 07:59:17

頁腳設置爲絕對。無論哪種方式，這不會讓我的內容div跨越頁腳和頁眉之間的垂直空間 – Mike

遇到粘腳頁面佈局問題

回答

相關問題