固定導航欄的粘性頁腳

Question

關於固定頁眉的頁腳有問題。 我遵循了一些似乎適合我想要實現的解決方案，例如（ http://ryanfait.com/sticky-footer/ ）或（ http://css-tricks.com/snippets/css/sticky-footer / ）和（ 具有固定頁眉的真正的粘性頁腳？ ），但仍有一些我想解決的問題。

這是我的JSFiddle

頁面底部的頁腳包含少量內容或很多內容-請檢查！

由於#siteContents：before，標題下方沒有內容（創建與標題高度相同的間隔）-檢查！

滾動條仍帶有少量內容-取消選中！

在div（siteContents）內時，頁面底部的頁腳中有這樣的內容-取消選中！

(...)
<div id="siteContents" class="clearfix">
     <div itemscope="itemscope" itemtype="http://www.datavocabulary.org/Something/">.. </div>
</div>
(...)

itemscope div可以對此行為負責嗎？

似乎是因為在加載頁面時，頁腳的高度是由瀏覽器計算出來的，它將頁腳放在他所知道的底部。 itemscope div中的內容（窗體，表等）溢出到位置不正確的頁腳上。

在這種情況下，我該怎么做才能將腳注保持在底部？

Answer 1

我建議使用min-height和position: absolute; 這樣的布局。 因此，您的容器將以至少100％的高度顯示：

.wrapper {
    position: relative;
    min-height: 100%;
}

您的粘性頁腳將需要以下position: absolute; 和bottom: 0; 因此該元素始終位於其父元素（ .wrapper ）的底部：

.page-foot {
    position: absolute;
    bottom: 0;  
}

您的標題將相同，但position: fixed; 。 由於您不希望頁眉和頁腳與內容重疊，因此需要同時設置padding-top和padding-bottom 。 如果您不想使用固定的padding ，則可以使用javascript設置padding-top / padding-bottom 。 據我所知，尚無僅CSS方式可實現相同的效果。

這是一個簡單的演示 。