強制頁腳留在底部CSS

Question

我一直在搞CSS，但我仍然無法獲得「粘腳」，因爲某些原因工作。

如果沒有足夠的內容，頁腳正常工作，並停留在底部，但是，如果有很多內容，最後100px總是在頁腳後面，當它不應該是，我不知道爲什麼。

要看看會發生什麼，請訪問：http://hevvo.eu/~dev/backtrack/index.php

任何幫助將不勝感激。

Answer 1

有很多關於這個的文章。我最喜歡的一個是：

http://www.cssstickyfooter.com/using-sticky-footer-code.html

Answer 2

從CSS-招數：http://css-tricks.com/snippets/css/sticky-footer/

CSS：

* { margin:0; padding:0; } 

html, body, #wrap { height: 100%; } 

body > #wrap {height: auto; min-height: 100%;} 

#main { padding-bottom: 150px; } /* must be same height as the footer */ 

#footer { 
    position: relative; 
    margin-top: -150px; /* negative value of footer height */ 
    height: 150px; 
    clear:both; 
} 

/* CLEAR FIX*/ 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%;} 
.clearfix { display: block;} 
/* End hide from IE-mac */ 

HTML：

<div id="wrap"> 

    <div id="main" class="clearfix"> 

    </div> 

</div> 

<div id="footer"> 

</div> 

Answer 3

你忘了對.wrapper設置padding-bottom: (height-of-footer)px。一旦你確定了，它就可以正常工作。即：

.wrapper { 
    min-height: 100%; 
    background: #F7F4EB; 
    padding-bottom: 100px; 
} 

Answer 4

通過在內容周圍添加一個新的div並添加一個填充底部：100px;到它。