100％高度 - 動態高度頁腳底部

我有以下網頁。100％高度 - 動態高度頁腳底部

<body> 
<div id="everything"> 
<div id="top_header">TOP BAR WITH INFO. FIXED HEIGHT</div> 
<div id="content"> 
<div id="header"><h1> MENU</h1></div> 
<div id="body">CONTENT</div> 
</div><!--end content--> 
<div id="footer">DYNAMIC HEIGHT DEPENDING ON THE LINKS IN THE FOOTER</div> 
</div><!--end everything--> 
</body>

和樣式：

<style type="text/css"> 
body { 
    background-color: #FFFFFF; 
    font: 13px arial; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
#everything { 
    background-color: #FFFFFF; 
    min-height: 100%; 
    margin: auto; 
    width: 100%; 
} 
#content { 
    display: block; 
    margin: auto; 
    width: 1000px; 

} 
#header { 
    padding-bottom: 25px; 
    background-color:#666699; 
    height:60px; 
} 
#body { 
    background: none repeat scroll 0 0 #FFFFFF; 
    margin: 0 auto; 
    padding-bottom: 23px; 
    background-color:#CC3333; 
    height:1500px; 
} 
#footer { 
    display: inline-block; 
    position: absolute; 
    bottom:0px; 
    width: 100%; 
    background-color:#FF6600; 
    height:70px; 
} 
#top_header { 
    width:100%; 
    background-color:#0066CC; 
    height:30px; 
} 
h1{ 
    margin:0; 
} 
</style>

我的頁腳的高度是動態的，我不能改變的HTML結構，只有CSS。當我在較小的屏幕上看到網頁並且「body」的高度大於視口時，沒有問題，但是如果我在較大的屏幕上查看網頁並且「body」的大小小於視口，則頁腳不堅守底部。另外，如果「body」的大小很大（如本例中那樣），它不會將頁腳推到底部。你能不能幫助我讓頁腳始終粘在視口的底部而不知道頁腳的高度以及所有內容的「body」的高度？

感謝，米哈伊

來源

2012-04-04 Mihai Ilaș

您是否需要在身體後面看到頁腳？或者，就在視口的底部（這樣如果身體的高度非常小，頁腳仍然粘在底部）？ – mshsayem 2012-04-04 08:24:07

如果身體的高度非常小，頁腳仍然會粘在底部 – 2012-04-04 08:54:07

可以定義頁腳位置相對和絕對去除

#footer{ 
    position:relative; 
}

來源

2012-04-04 08:25:27

是的，這在這個特定情況下有效。下一步將不會在身體上具有1500px的高度，即使我在「body」中沒有太多內容，頁腳也會粘貼到底部，並且所有內容都是視口的100％高度。 – 2012-04-04 09:01:08

這不是完全可以在CSS2，特別是靈活的高度頁腳被正確地推下通過擴大內容。您可以使用高度可變的方式將其粘貼在屏幕底部，但由於您之前不知道該特定高度，因此無法相應地設置內容邊距/填充底部。

我建議你在頁面加載後通過JavaScript測量頁腳高度，並將其應用爲內容填充/頁邊距，這會讓你圍繞着你面臨的唯一真實問題。

另一種選擇是通過使用包裝和顯示來利用表：table-row/table-cell。我已經在這裏回答了一個類似的問題：https://stackoverflow.com/a/9946474/759144

來源

2012-04-04 08:35:02 mystrdat

100％高度 - 動態高度頁腳底部

回答

相關問題