html - 如何限制页脚的宽度

Question

我希望页面底部的页脚大小与顶部的导航栏大小相同( Angular 落有一些空白)。

条形图位于一个容器内，该容器具有 container{margin:auto;}这就是 Angular 落中有空白区域的原因。

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

这是页脚的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;
}