基於屏幕尺寸的頁腳高度

我想創建一個與內容相關的頁腳（因此不固定），但會填充屏幕的其餘部分。舉例來說，在我的大屏幕上，頁腳會在同一個地方開始，但是會填充100px（例如）。在較小的顯示器上，只需要填充75px。我嘗試過使用100％，但它會導致頁面變得非常大，用戶可以向下滾動並使用頁腳填充整個屏幕。有沒有辦法讓它的尺寸更合理一些，這樣它就能填滿屏幕的底部？我當前的代碼是這樣的：基於屏幕尺寸的頁腳高度

.footer 
{ 
    position:relative; //can't be fixed as content might overlap if extended  
    height:100%; 
    width:100%; //fill the entire screen horizontally 
    bottom:0px; 
    margin-top:345px; //used to make sure content doesn't overlap 
}

感謝您的任何想法

來源

2010-05-09 o-logn

你知道如果你只是把內容放在你的頁面上，你不必擔心它下面的頁腳......爲什麼人們擔心頁面看起來如果沒有內容？如果沒有內容，人們就不會在意第一眼就看到它。 – animuson 2010-05-09 04:01:29

對不起，我不明白？我確實有內容。低於這個內容我想要一個頁腳。頁腳在內容下面（高度變化）開始，並且必須到達底部（這樣它不僅僅是頁面中間的一個欄）。 – 2010-05-09 13:03:08

我用類似的東西，我發現要解決它，以確保設置身體和HTML最小高度的伎倆掙扎： 100％，然後有內容和所有其他divs等於100％。

html { 
    min-height: 100%; 
} 
body { 
    margin: 0; 
    padding: 0; 
    min-height: 100%; 
} 
#content { 
    min-height: 100%; 
}

來源

2010-05-09 20:27:31 adamwstl

基於屏幕尺寸的頁腳高度

回答

相關問題