Question

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

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;
}

Answer 2

像这样更改你的CSS。请注意，除了页脚，我摆脱了html样式，这是你的问题的罪魁祸首

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

footer{
    position:absolute;
    bottom:0;
    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%;
}

查看您的updated fiddle

CSS：页脚不能坚持到底

2 个答案:

JSFiddle - DEMO