css - 调整浏览器大小时的 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 像素，然后在底部设置 30 像素的页脚。

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

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

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

我的意思是，假设您的页面总高度为 1000 像素。用 id page 在整个页面周围放置一个包装器，给出绝对定位和高度 1000px，然后将页脚放在最后。