CSS:页脚不能粘在底部

Question

我试图让我的页脚贴在页面底部，但不知何故它做不到。我在互联网上寻找答案但没有成功，所以我决定在这里试一试。

http://jsfiddle.net/f54eq3w8/

html:

<div id="container">test</div>
<footer></footer>

CSS:

html{
    height:100%;
    position:relative;
    min-height:100%;
}

body{
    height:100%;
    padding:0;
    display:inline-block;
    width:100%;
    min-height:100%;
}

footer{
    position:relative;
    background-color:#003300;
    color:red;
    width:100%;
    height:100px;
    border-top:4px solid #B8B8B8;
}

#container{
    width:1024px;
    margin:auto;
    margin-top:60px;
    min-height:100%;
}

Answer 1

JSFiddle - DEMO

在容器内使用一个额外的 div 将页脚推送到与页脚高度相同的高度，并将底部边距应用到容器的页脚高度的负值。

HTML:

<div id="container">
    <div class="footer-push">
    </div>
</div>
<footer></footer>

CSS:

html, body {
    background-color: #00FF00;
    height: 100%;
    margin: 0px;
}
#container {
    z-index: 999;
    background-color: #00FF00;
    position: relative;
    width: 1024px;
    margin: 0 auto;
    min-height: 100%;
    margin: 0px auto -104px auto;
}
.footer-push {
    position: relative;
    height: 104px;
}
footer {
    z-index: 99999;
    position: relative;
    height: 100px;
    background-color: #003300;
    width: 100%;
    border-top:4px solid #B8B8B8;
}