如何限制页脚的宽度

Question

我希望页面底部的页脚大小与顶部的导航栏相同（角落中有一些空白区域）。

酒吧位于一个容器内，container{margin:auto;}就是为什么角落里有空白区域。

我不明白为什么页脚占据整个屏幕宽度，它与顶部的栏位于同一容器内。

这是页脚css：

.down{
  position: absolute;
  margin: auto;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: gray;
  text-align: center;

}

我不想左右编辑边距，因为它不再响应

Answer 1

很难说没有HTML，但尝试将以下规则添加到容器中：

.container {
    position: relative;
}

页脚的位置是绝对的。通过给容器一个相对位置，页脚将相对于容器而不是主体定位。

这会导致页脚没有附加到窗口的底部，而是内容的底部。因此，另外，为容器添加最小高度：

.container {
    min-height: 100vh;
}

Answer 2

您必须将<div class="container"> <nav></nav> <div class="down"> </div> </div> .down{ position: absolute; margin: auto; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: gray; text-align: center; } 放入容器

<ImageView>