CSS 对于浮动到页面底部（不是视口）的可变高度页脚

Question

我正在开发 React 应用程序并尝试创建一个页脚，如果没有足够的内容来填充 space，它会浮动到页面底部（不是视口）。此外，页脚高度会随着浏览器遇到媒体断点而变化。

下面是 html 的高级概述：

<div id="root">
  <div data-reactroot id="app">
    <div id="modal">
      ...
    </div>
    <div id="header">
      ...
    </div>
    <div id="container">
      ...
    </div>
    <footer id="footer">
      <nav class="navbar navbar-light navbar-fixed-bottom bg-faded">
        <div class="container">
          <div class="row">
            <div class="col-md-4">
              <a class="nav-link" href="/privacy-policy">Privacy Policy</a>
            </div>
            <div class="col-md-4">
              <a class="nav-link" href="/terms-of-use">Terms of Service</a>
            </div>
            <div class="col-md-4">
              <a class="nav-link" href="/contact-us">Contact Us</a>
            </div>
          </div>
        </div>
      </nav>
    </footer>
  </div>
</div>

这是相关的 CSS（注意当前 css 防止页面过度滚动 - 我删除了解决此问题的失败尝试）：

#footer {
  margin-top: 10px;
  text-align: center;
}

html, body {
  margin: 0;
  height: 100%;
}

html {
  overflow: hidden;
}

body {
  overflow: auto;
}

#root, #app {
  height: 100%;
}

此外，请注意，我在 Stack 上发现了无数关于此问题的类似问题，但字面上 none 规定了高度可变的页脚和非粘性（即定位）的页脚在视口底部）。

如有任何帮助，我们将不胜感激！

Answer 1

所以，我不是 100% 确定我理解了这个问题，所以要重复我的理解。

您希望页脚始终位于其余内容下方
如果页面小于视口的大小，您希望页脚位于视口的底部
如果页面大于视口的大小，页脚应该正好位于其余内容的正下方。

假设是这种情况，我认为解决这个问题的最简单方法是将你的#app 的最小高度设置为至少 100vh，并使用 flexbox 扩展容器以填充额外的 space如果存在的话。

鉴于您当前的 HTML 结构，这看起来像：

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#container {
  flex-grow: 1;
}

您可以在此处查看实际效果：https://codepen.io/kball/pen/YxmgBL

如果我对您的 question/desired 结果的理解有误，请告诉我，我会再考虑一下。

CSS 对于浮动到页面底部（不是视口）的可变高度页脚

CSS For Variable Height Footer that Floats to Bottom of Page (Not Viewport)

html

css

footer

reactjs