CSS：位置DIV在

頁的底部這是一個示例HTML頁：CSS：位置DIV在

<html> 
    <body> 
    <div class="content"> 
    </div> 
    <footer>&nbsp;</footer> 
    </body> 
</html>

這是我的樣式表：

html { 
    height: 100%; 
} 

body { 
    position: relative; 
    margin: 0; 
    height: 100%; 
} 

.content { 
    width: 8cm; 
    position: absolute; 
    background-color: #ff0; 
    height: 15cm; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
    background-color: #f00; 
    width: 100%; 
}

這是它的樣子：

How the code is rendered.

我的問題是，我希望紅色頁腳位於頁面的底部（而不是底部的視口），假設.content實際上具有可變高度。沒有JavaScript可能嗎？

來源

2015-05-04 theV0ID

你的意思是'footer {position：fixed;}'？ – Stickers

@sdcr不，如我明確寫的，我*不希望*頁腳留在視口的底部，而是在頁面的底部，即主體。 – theV0ID

在內容和頁腳上都使用'position：absolute'有什麼特別的理由嗎？ – Stickers

This Fiddle顯示頁腳，始終是無論是在頁面上或底部視的最低點。

當內容不填充頁面時，DIV位於視口的底部，並且當內容比視口高時，DIV位於內容下方。

要做到這一點，就body這樣使用min-height：

html { height: 100%; } body { min-height: 100%; position: relative; } footer { position: absolute; bottom: 0; }

測試在Safari 8.0.3。

來源

2015-05-04 23:19:38 anroesti

這不適用於我的'content'或'main'上的'position：absolute'，並且使用Chrome和Firefox進行測試。我需要這個「絕對位置」，因爲我需要將內容相對於其父項進行定位。 – theV0ID

這是因爲如果你在內容上使用'position：absolute'，那麼根本就不會爲它保留空間。如果從內容中刪除'position：absolute'不是一個選項，您需要找到另一個解決方法。 – anroesti

CSS：位置DIV在

回答

相關問題