您能否将固定元素垂直放置在视口中，但水平放置在父元素中？

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

将 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 2

当你设置position: fixed;

The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to the container block initial established by the viewport , except When one of Its ancestors have to transform, perspective, or filter Property Set to something other than none (see the CSS Transforms Spec ), in Which case That ancestor behaves as the container containing block. (Note That there are inconsistencies With browser perspective and filter contributing to block container containing formation.) Its position is determined to end by the values of top, right, bottom, and left. This value always creates a new stacking context . In printed documents, the element is placed in the same position on every page .

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

如果你想让页脚完全靠左，只需添加

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

如果你想要 #footer 在实际位置但填满整个容器 space 只需添加

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

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

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>

您能否将固定元素垂直放置在视口中，但水平放置在父元素中？

Can you position a fixed element in the viewport vertically, but in the parent element horizonally?

html

css

css-position