Question

/* position */
.container {
    width: 40vw;
    margin: 0 auto;
    position: relative;
}

#footer {
  position: fixed;
  bottom: 0;
}

/* style */
p {
  padding: 10px;
  margin: 10px;
}

#body p {
  background-color: #eee;
}

#footer p {
  background-color: #303030;
  color: white;
}

<div class="container">
  <div id="body">
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
  </div>
  <div id="footer">
    <p>this is the footer content</p>
  </div>
</div>

（如果您愿意，相同的代码位于https://jsfiddle.net/bxkgL9zs/4/）

如您所见，粘性页脚元素：

#footer {
    position: fixed;
    bottom: 0;
}

似乎包含在容器元素内：

.container {
    width: 40vw;
    margin: 0 auto;
    position: relative;
}

因为它并没有像您期望的那样一直卡在屏幕的左侧。

我的问题是，如何使容器的页脚充满，但仍像现在一样固定在屏幕底部？

我本以为right: auto会这样做，因为left: auto（现在是什么）似乎正确地将其放置在左侧的容器中。

Answer 1

设置position: fixed;

该元素已从常规文档流中删除，而没有在页面轮廓中为该元素创建任何空间。它相对于由视口初始建立的容器块定位，除非其祖先之一必须将Property Set转换，透视图或将Property Set过滤为其他属性（请参阅CSS Transforms Spec），在这种情况下，该祖先的行为与容器包含块。（请注意，浏览器透视图和过滤器会导致包含块容器的结构不一致。）其位置由top，right，bottom和left的值确定。此值始终创建一个新的堆栈上下文。在打印文档中，该元素在每一页上都放置在相同位置。

这就是为什么#footer在底部而不是在左对齐的原因，因为在您的情况下，container的相对位置默认为相对于容器块的左位置

如果您希望页脚移到最左端，只需添加

#footer {
  position: fixed;
  bottom: 0;
  left: 0;      //add this
}

如果您希望#footer处于实际位置，但要填充整个容器空间，只需添加

#footer {
  position: fixed;
  bottom: 0;
  width: 40vw;    //add the same width of the container
}

要更好地了解定位，请阅读此https://developer.mozilla.org/es/docs/Web/CSS/position

Answer 2

将width: 40vw;添加到页脚中，就这么简单...

/* position */
.container {
    width: 40vw;
    margin: 0 auto;
    position: relative;
}

#footer {
  position: fixed;
  bottom: 0;
  width: 40vw;
}

/* style */
p {
  padding: 10px;
  margin: 10px;
}

#body p {
  background-color: #eee;
}

#footer p {
  background-color: #303030;
  color: white;
}

<div class="container">
  <div id="body">
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
  </div>
  <div id="footer">
    <p>this is the footer content</p>
  </div>
</div>

Answer 3

使用与容器相同的宽度，并将其中的p设置为inline-block，以便轻松地将其居中：

/* position */
.container {
    width: 40vw;
    margin: 0 auto;
    position: relative;
}

#footer {
  position: fixed;
  bottom: 0;
  text-align:center;
    width: 40vw;
}

/* style */
p {
  padding: 10px;
  margin: 10px;
}

#body p {
  background-color: #eee;
}

#footer p {
  background-color: #303030;
  color: white;
  display:inline-block;
}

<div class="container">
  <div id="body">
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
    <p>this is content</p>
  </div>
  <div id="footer">
    <p>this is the footer content</p>
  </div>
</div>

您可以在视口中垂直放置固定元素，而在视口中水平放置固定元素吗？

3 个答案: