html - float 到页面底部(不是视口(viewport))的可变高度页脚的 CSS

Question

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

这是对 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 上发现了无数关于此问题的类似问题，但实际上没有一个规定页脚具有可变高度和非粘性页脚(即位于视口(viewport)底部)。

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

Answer 1

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

1. 您希望页脚始终位于其余内容下方
2. 如果页面小于视口(viewport)的大小，您希望页脚位于视口(viewport)的底部
3. 如果页面大于视口(viewport)的大小，则页脚应位于其余内容的正下方。

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

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

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

#container {
  flex-grow: 1;
}

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

如果我对您的问题/期望结果的理解不正确，请告诉我，我会再考虑一下。