如何將頁腳向下推到頁面的最底部，而不管內容中有多少內容？

Question

我在動態生成網頁主要內容的內容。該頁面還有一個頁眉和一個頁腳。頭部仍然固定在頂部，但是頁腳擁抱了身體的底部，而不是錨定到頁面的底部。即使動態生成的內容數量爲零或最小，我也希望頁腳擁有頁面的底部。我怎樣才能做到這一點？

Answer 1

這裏是一個粘頁腳的示例：http://twitter.github.io/bootstrap/examples/sticky-footer.html

下面的CSS被從上面的鏈接服用。

CSS

/* Sticky footer styles 
-------------------------------------------------- */ 
html, 
body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by it's height */ 
    margin: 0 auto -60px; 
} 

/* Set the fixed height of the footer here */ 
#push, 
#footer { 
    height: 60px; 
} 
#footer { 
    background-color: #f5f5f5; 
} 

/* Lastly, apply responsive CSS fixes as necessary */ 
@media (max-width: 767px) { 
#footer { 
    margin-left: -20px; 
    margin-right: -20px; 
    padding-left: 20px; 
    padding-right: 20px; 
} 
} 



/* Custom page CSS 
-------------------------------------------------- */ 
/* Not required for template or sticky footer method. */ 

.container { 
    width: auto; 
    max-width: 680px; 
} 
.container .credit { 
    margin: 20px 0; 
} 



/* Custom page CSS 
-------------------------------------------------- */ 
/* Not required for template or sticky footer method. */ 

.container { 
    width: auto; 
    max-width: 680px; 
} 
.container .credit { 
    margin: 20px 0; 
} 

Answer 2

您需要檢測頁面+內容的高度以及擁有該網站的窗口的高度。如果高度小於窗口，則需要固定位置，否則，讓它坐下並按下內容。這是一般的方法。如果您發佈了代碼，我可以幫助向您展示如何使其工作。