短頁腳，無Superflous標記或Javascript

我一直在試圖找出處理短頁面上的頁腳而不使用多餘的，非語義標記的最佳方式。我很感興趣，對這件事感到很迂腐。所以，讓我們來討論一下：短頁腳，無Superflous標記或Javascript

最簡單的選擇是允許身體的背景顏色超出頁腳。但是，如果你的頁腳是不同的顏色，這可能看起來很糟糕。 Simple Demo

Sticky footers需要添加沒有語義含義的「推」元素。呸。

某種faux columns？沒有背景圖片。

設置的background-color的body或html的顏色你想要的footer要和全寬包裝div（Demo）「覆蓋起來」。如果我不想要這種效果，我不會有那些包裝div。它們沒有增加語義。

嗯。

我一直在試驗新的CSS3 flexbox，我拼湊在一起this。

html{height:100%;} 
body{display:box; box-orient:vertical; height:100%;} 
header{height:50px; background:salmon;} 
section{height:50px; /*height:2000px;*/} 
footer{width:100%; min-height:100px; box-flex: 1; background:lightblue;}

它的工作原理與我的想法完全相同。當內容太短而不能導致滾動條時，頁腳會填充剩餘空間，並且當內容多得多時，會縮小至min-height（不理想）。它適用於WebKit。 Firefox非常奇怪地處理display: box。出於某種原因，您不能以display: -moz-box爲中心的元素。目前Opera和IE都不支持flexbox。此外，它優雅地降低，這是非常需要的。

我陷入了僵局。我可以弄髒和混亂我的標記，接受一些現代瀏覽器的優雅降級（包括只有display: -webkit-box,-webkit-box-flex等），或基於CSS的限制來改變我的設計，但我不想做任何這些妥協。幫我。

來源

2012-03-02 bookcasey

如果你願意在你的CSS使用僞元素，你可以這樣做：

footer:after { 
    background: lightblue; /*same color as footer*/ 
    content: ""; 
    margin-top: 100px; /*height of footer. (prevents overlapping footer content)*/ 
    position: fixed; 
    width: 100%; 
    height: 100%; 
}

在標記沒有變化，它應該在大多數瀏覽器。

來源

2012-03-02 09:16:36 brains911

短頁腳，無Superflous標記或Javascript

回答

相關問題