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

debugcn 发表于 Dev

声名远播

问题：我喜欢当您向下滚动页眉在页面顶部的位置时如何使用页脚，但是如果只在您一直滚动到页面底部时才显示页脚，我更喜欢它（因此位置不固定在现在的位置，而是在页面的最底部）。

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

红润

是的，我给了您链接，但是如果您遇到麻烦，请看一下。使用您的代码和我给您的链接，我们可以创建此代码。

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。就是这样，全部完成。看一下演示并试用它。

带有内容：

此处演示

没有内容：

此处演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。