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

Question

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

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

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

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

希望你明白我的意思。

谢谢！

Answer 1

想法是将元素固定在底部。使用 bottom 或 margin-bottom 参数设置底部偏移量。

你可以这样做：

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

Answer 2

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

要解决这个问题，应该让父元素占满屏幕。例如，

<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。那你就不用考虑父元素的高度了

Answer 3

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

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

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

footer with absolute position - responsive design

css

html

position

footer

absolute