html - 如何将页脚移动到页面底部？

Question

网址: http://test.getfamo.us/

问题: 当您向下滚动时，我喜欢页眉如何保持在页面顶部的位置，但是对于页脚，如果它只在您一直滚动到页面底部(因此位置不像现在那样固定在适当的位置，而是在页面的最底部)。

这是与页脚关联的 CSS:

#foot{
left:0px;
right:0px;
color:white;
position:fixed;
height:50px;
background-color:#444444;
width:100%;
margin-bottom:0px;
bottom:0px;
margin-right:0px;
z-index:103;
}

#foot a{
height:50px;
width:75px;
float:left;
color:white;
text-align:center;
text-decoration:none;
line-height:25px;
 }

 #foot p{
position:absolute;
width:150px;
height:50px;
right:0px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
bottom:0px;
top:0px;
}

非常感谢大家!希望它是一个简单的修复。如果需要，还可以在此处获得完整的 CSS:http://test.getfamo.us/css/

Answer 1

好的，我给了你链接，但如果你遇到问题，请看看这个。使用您的代码和我给您的链接，我们可以创建它。

HTML:

<div class="page-wrap">
    <div id="fillspace"></div>
</div>
<div id="foot"></div>

CSS:

/* Your code */
#foot {
    left:0px;
    right:0px;
    color:white;
    height:50px;
    background-color:#444444;
    width:100%;
    margin-bottom:0px;
    bottom:0px;
    margin-right:0px;
    z-index:103;
}
#foot a {
    height:50px;
    width:75px;
    float:left;
    color:white;
    text-align:center;
    text-decoration:none;
    line-height:25px;
}
#foot p {
    position:absolute;
    width:150px;
    height:50px;
    right:0px;
    margin-bottom:0px;
    margin-right:0px;
    margin-top:0px;
    bottom:0px;
    top:0px;
}

/* New Code */
 html, body {
    height: 100%;
    margin: 0;
}
.page-wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -50px;
}
.page-wrap:after {
    content:"";
    display: block;
}
#foot, .page-wrap:after {
    /* .push must be the same height as footer */
    height: 50px;
}
#fillspace {
    width: 100%;
    height: 1000px;
    background: #ddd;
}

所以把你的代码和我给你的链接里的代码放在一起。然后我们拿走你的 position: fixed 并将页脚的正确高度设置为 #foot, .page-wrap:after 和 .page-wrap。就这样，一切都完成了。查看演示并试用它。

内容:

DEMO HERE

没有内容:

DEMO HERE