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;
}

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

3 个答案: