Question

有问题的网站：http://www.flowersbe.com

所以我没有问题让页脚粘到底部，我的问题是我的容器上有一个上边距，将页脚向下推过浏览器底部25px，这在上述网站的联系页面。我希望将25px的空间保持在顶部，但我仍然希望页脚完全可见......下面是我的容器和页脚的css ......关于如何解决这个问题的任何想法？

html,
body {
    height: 100%;
}

#container {
    width: 960px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 25px auto -50px;
    background-color: #fff;
}


footer {
    clear: both;
    width: 960px;
    height: 35px;
    margin: 0 auto;
    padding: 15px 0 0 0;
    background-color: #ffebeb;
    text-align: center;
}

.push {
    height: 50px;
}

Answer 1

我相信为了达到你想要做的，你必须引入一些JavaScript来计算#container应该是的确切高度。

它将height 100％转换为视口的精确高度，然后在其上添加25px边距。我能想到的唯一方法是使用JavaScript来获取视口的高度，并将#container的高度设置为该值减去25px。

可能的替代解决方案，不涉及JS：

只需放弃min-height，然后允许#container尽可能高。
在position: fixed上使用footer以确保页脚始终位于视口的底部，但请注意它将位于任何内容的顶部，其长度足以超出视口的高度视口。

这会让你继续下去吗？

需要一些帮助尝试让这个粘性页脚恰到好处

1 个答案: