调整浏览器大小时的CSS Div页脚

Question

我在页面上打了一个页脚。页脚的位置就像它应该的那样，但是当我从下到上调整浏览器大小时我遇到了问题。有关详细信息，您可以看到以下图片：

这是我的css页脚代码：

.footer_page {
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}

有人有建议吗？ 感谢。

Answer 1

如果您的意思是页脚没有固定在底部，请尝试

.footer_page, .push {
  clear: both;
  color: #fff;
  text-align: center;
  bottom: 30px;
  width:100%;
  position:absolute;
}

所以添加.push和clear:both。

Answer 2

底部30px表示窗口的底部。计算你需要你的页脚所需的顶部距离 top:500px

更好的方法是在整个页面周围放置一个大div id="page"个所需高度，比如1000像素，然后是30px底部的页脚。

#page{position:absolute;height:1000px}
#page #footer{position:absolute;bottom:30px}

如果这看起来太多或者页面的高度是可变的，那么让页脚文档流程的一部分。在这种情况下，最好不要使用绝对定位。

你也可以用一些javascript魔法来做到这一点。

我所说的是，假设您网页的总高度为1000px。在包含id页面的整个页面周围放置一个包装器，给出绝对定位和高度1000px，然后将页脚放到最后。