将页脚放在长页面的底部，绝对定位 child

Question

我有一个英雄部分，背景图像中有一个绝对定位的文本模态。我希望文本模式位于背景图像的中间，无论文本（页面）在英雄图像部分下方有多长。我已将问题缩小到 CSS 我已将页脚保留在页面底部，所有内容下方。如果我删除正文 CSS 选择器中的 position: relative ，那么模态将位于英雄部分的中间，正如它应该的那样，但随后我的页脚会跳到视口的底部而不是底部页面上的所有内容。

如何让页脚保持在页面所有内容的底部，并让我的文本模式保持在英雄部分的垂直和水平中心？

在此处查看我的代码沙箱：https://codesandbox.io/s/hero-page-jk8rr?file=/src/styles.css

页脚片段：

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 2.5rem;
}
.footer-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background-color: lightcoral;
}

英雄片段：

.hero-container {
  height: 100%;
  width: 100%;
  margin-top: -5px;
  overflow: hidden;
}

.hero-media {
  position: relative;
  z-index: -1;
  vertical-align: middle;
  width: 100vw;
  height: 50vh;
  object-fit: cover;
}

.hero-modal {
  text-align: center;
  background-color: rgb(255, 255, 255, 0.95);
  border-radius: 5px;
  max-width: 60%;
  padding: 3rem 7rem;
  position: absolute;
  top: 30%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

...

       <div className="hero-container">
          <img
            alt="img"
            src={
              "https://firebasestorage.googleapis.com/v0/b/ship-form-template.appspot.com/o/public%2Fpexels-%C3%A1kos-szab%C3%B3-440731.jpg?alt=media&token=4261a8f1-cf36-45c5-b566-c5c2fa0dd16c"
            }
            className="hero-media"
          />
          <div className="hero-modal">
            <h2>Heading 2</h2>
            <p>
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
              Lorem ipsum body text goes here. Lorem ipsum body text goes here.
            </p>
            <button>CTA Button</button>
          </div>
        </div>

Answer 1

https://codesandbox.io/s/hero-page-forked-4mj3q?file=/src/styles.css

如您所见，我删除了 body 标记中的 position: relative，因为这会使模态框位于页面的正中间。你已经猜对了:)

现在，因为它已被删除，所以您不再需要页脚包装器中的 position: absolute 和 bottom: 0，因为它将保留在页面底部，因为它是 [=] 中的最后一个元素23=] 命令。如果你离开它，它会将自己定位在加载屏幕的底部，这就是为什么它会在中间某处出现错误。

由于body标签中的padding-bottom: 2.5rem;，页脚不会在最底部。也将其删除，它应该可以正常工作！

将页脚放在长页面的底部，绝对定位 child

Keep footer at bottom of long page with an absolute positioned child

html

css

position