CSS Flexbox - 具有可滚动内容的浮动可变高度页脚答案

【问题标题】：CSS Flexbox - Floating variable height footer with scrollable contentCSS Flexbox - 具有可滚动内容的浮动可变高度页脚
【发布时间】：2019-03-24 01:28:38
【问题描述】：

我正在尝试制作一个高度可变的固定“浮动”页脚，即使内容发生变化，它也始终显示在底部。

我有以下Create React App HTML：

<html>
  <body>
    <div id="root">
      <div class="app">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"><div>
      </div>
    </div>
  </body>
</html>

以及以下 CSS：（根据 Fixed header, footer with scrollable content 的第二个答案）

html, body, #root {
  height: 100%
}

.app {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
}

.header {
  flex-shrink: 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  flex-grow: 1;
}

.footer {
  flex-shrink: 0;
}

但是，随着内容的动态变化，页面会失真并且元素会相互重叠。我发现将#root 设置为height: 275% 可以使页面在展开状态下正确显示（并且只有这样）。

设置#root 和min-height: 100% 使页脚在没有足够内容时出现在页面中间，并且在内容可滚动时不再浮动。

【问题讨论】：

查看这个答案。 stackoverflow.com/questions/50674837/… 它在 bootstrap-4 中，但您可以使用具有相同 css 属性的自定义 css。

标签： css flexbox footer

【解决方案1】：

我认为这就是你想要达到的目标https://codepen.io/anon/pen/bmMrOg

<div id="root">
  <div class="app">
    <div class="header">
      header
    </div>
    <div class="content">
      <div>content</div>

    </div>
    <div class="footer">
      footer
      <div>
  </div>
</div>

还有 CSS

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

.app {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
  background: blue;
}

.content {
  overflow: auto;
  flex-grow: 1;
  background: red;
}

.footer {
  flex-shrink: 0;
  background:green;
}

【讨论】：