頁腳底部的頁腳

我想讓頁腳停留在頁面底部。所以，我創建了min-heigt:100%一個DIV並沒有高度設定動畫的Ajax內容加載一個DIV：頁腳底部的頁腳

HTML：

<div class="main"> 
    <div class="header navi>…</div> 
    <div class="animater"> 
     <!-- content goes here --> 
     <div class="footer"> 
      <!-- footer stuff goes here --> 
     </div> 
    </div> 
</div>

CSS：

.main { 
    min-height:100%; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 
.header { 
    // height, width, margin, position 
} 
.animater { 
    // empty 
} 
.footer { 
    bottom:0px; 
    position:absolute; 
}

當我加載網頁和內容比我的屏幕小得多，一切都很完美。頁腳按照假設位於屏幕的底部。

我現在使用CSS關鍵幀爲animater設置動畫。當動畫結束時，我將替換animater的內容並將其重新激活。當內容再小一點時，頁腳就在我的animater的頂部。但是，當我「手動」重新加載頁面（以便內容不獲得動畫效果）時，頁腳正確定位。

所以我需要一個頁腳，它位於內容的底部，無論內容的高度如何。我不能給動畫者最小高度，因爲它不在頁面頂部。

來源

2013-01-21 Julian F. Weinert

試過像[CssStickyFooter（http://www.cssstickyfooter.com/）了嗎？ PS。有助於瞭解您需要/希望支持哪些瀏覽器。 – Jeroen

當您爲關鍵幀設置動畫時，是否默認回到某個位置：相對？如果您在關鍵幀的末尾再次設置它，它有幫助嗎？ – Brian

不是。將其設置爲相對會使頁腳粘在動畫的底部。但是動畫師並沒有進入頁面的底部。我想支持大多數主流瀏覽器，如Safari，FF，如果可能的話也IE10 + –

我做的這個例子顯示了讓頁腳停留的最小css。 http://jsfiddle.net/meBv3/

的HTML

<div class="wrapper"> 
<div class="page"> 
    page here 
</div> 
<div class="footer"> 
    Content for class "footer" Goes Here 
</div> 
</div>

的CSS

/* THIS IS THE MIN STYLE NEEDED TO GET THE FOOTER TO STAY DOWN */ 

html, body{ 
height:100%; /* to keep .footer on bottom */ 
margin:0; /* to get rid of scroll bar, because (100% + default margin = scroll) */ 

} 
.wrapper { 
min-height: 100%; /* to keep .footer on bottom */ 
position: relative; /* must be relative or .footer will cover content */ 
} 
.page { 
padding-bottom:2.2em; /* MUST have padding on the bottom => .footer, or .footer will cover content 8*/ 

} 
.footer { 
position: absolute; /* to keep .footer on bottom */ 
bottom: 0px; /* to keep .footer on bottom */ 
height:2em; /* height must be smaller then .page's bottom padding */ 

}

來源

2013-01-21 15:34:02

就像我在我的問題中說的，我已經得到它的工作。但問題在於內容的高度動態變化。然後頁腳不再粘在底部。 –

用我的代碼'footer'總是在'page'下面 –

頁腳底部的頁腳

回答

相關問題