Question

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

以下是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上发现了关于这个问题的大量类似问题，但实际上并没有规定具有可变高度的页脚和不粘的页脚（即位于视口底部）。

非常感谢任何帮助！

Answer 1

所以，我并非100％确定我理解这个问题，所以要重复我的理解。

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

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

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

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

#container {
  flex-grow: 1;
}

您可以在此处查看此操作：https://codepen.io/kball/pen/YxmgBL

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

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

1 个答案: