創建位於屏幕下方的頁腳元素

我有一個頁面不能填滿整個屏幕的高度，但我希望頁腳保持在屏幕下方，以便在開始滾動時顯示正確 - 無論人的屏幕高度。創建位於屏幕下方的頁腳元素

我該如何使用CSS來完成這項工作？

編輯

我曾嘗試：

#footer{ 
    position:absolute; 
    left:0px; 
    top:100%; 
}

這工作，但它礙事，如果我的頁面確實去了屏幕的高度。我真的需要兼容這兩種類型的頁面。

來源

2012-10-27 Hope4You

廣告編輯）嘗試設置'邊距：-HEIGHT' –

@IanKuca高度取決於頁面的大小 – Hope4You

頁腳的高度？這是一個無賴。 –

這裏是你描述的佈局的一個簡單的例子：

HTML

<html> 
<head><title>Hidden Footer</title></head> 
<body> 
    <div id="content"> 
     Content here 
    </div> 
    <div id="footer"> 
     Footer here 
    </div> 
</body> 
</html>

CSS

html, 
body { height: 100%; min-height: 100%; } 

#content { min-height: 100%; } 
#footer { background: #ccc; }

來源

2012-10-27 20:35:25

@ Hope4You謝謝。 –

我只是試過你的示例代碼，無論我的內容多長時間，它都很棒！謝謝。 – Hope4You

太棒了！很高興我能幫上忙。 –

您鏈接的頁面有一個固定的標題。身體的其他部分適當地滾動。

查看固定的CSS頁眉/頁腳以複製效果。

來源

2012-10-27 20:30:29 Lowkase

你的屏幕高度是多少？當我在鏈接頁面上調整瀏覽器的大小時，只要在聯繫表單之後保留一些空格，頁腳就會始終顯示在我開始滾動之後。 – Hope4You

如何使用固定頁腳？我不希望頁腳立即出現。 – Hope4You

html { 
    min-height: 100%; 
} 
body { 
    min-height: 100%; 
    padding-bottom: 40px; /* free space for the footer */ 
    box-sizing: border-box; /* don't add padding to the actual height */ 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 40px; 
}

來源

2012-10-27 20:34:32

創建位於屏幕下方的頁腳元素

回答

相關問題