Question

问题：我喜欢当你向下滚动标题在页面顶部停留的位置时，如果它只在你一直滚动的时候显示，我会更喜欢它页面底部（所以位置不像现在那样固定，而是位于页面的最底部。）

这是与页脚关联的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

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

1 个答案:

HTML：

CSS：