具有绝对位置的页脚 - 响应式设计答案

【问题标题】：footer with absolute position - responsive design具有绝对位置的页脚 - 响应式设计
【发布时间】：2015-06-04 12:43:02
【问题描述】：

我的响应式设计有点问题。我正在使用具有这种风格的普通<footer>。

footer {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 0;
}

它工作正常，当我使用较小的屏幕时，我必须滚动，这很正常。

问题是<footer> 不在底部。它位于屏幕中间。喜欢margin-top: 100%的全屏，不用滚动。

希望你明白我的意思。

谢谢！

【问题讨论】：

发帖前请先搜索网站，这个问题已经被问过很多次了。您正在寻找Sticky footer。
谢谢！我不记得“粘性”这个词了。

标签： css html position footer absolute

【解决方案1】：

固定位置，这可能看起来像这样

 footer {
  width: 100%;
  height: 20px;
  position: fixed;
  bottom: 5px;
  left: 0;
}

【讨论】：

【解决方案2】：

这个想法是将元素定位在底部。使用底部或边距底部参数设置底部偏移量。

你可以这样做：

footer {
    position:fixed;
    height:20px;
    bottom:0px;
    left:0px;
    right:0px;
    margin-bottom:0px;
}

【讨论】：

【解决方案3】：

我希望我能正确解决您的问题。你的问题是，当页面内容很少时，页脚位于屏幕中间，对吧？

要解决这个问题，你应该让父元素占据全屏。例如，

<head>
<style>
footer {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 0;
}
body {
    min-height: 100%;
}
</style>
</head>
<body>
<div>
    some other content
</div>
<footer>
    Some content inside footer
</footer>
</body>

或者，如果您不介意页脚始终在屏幕底部可见，请使用 position:fixed 。那么就不需要考虑父元素的高度了。

【讨论】：