flexbox 是否可以通过扩展前一个页脚部分来“粘贴”最后一个页脚部分？答案

【问题标题】：Can flexbox be used to 'sticky' the last footer section by expanding the previous footer section?flexbox 是否可以通过扩展前一个页脚部分来“粘贴”最后一个页脚部分？
【发布时间】：2018-11-06 06:56:52
【问题描述】：

鉴于下面的基本 HTML 结构（我无法更改），我知道我可以使用这个 CSS 扩展主要内容 div：

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#columns {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}

<body>
  <header>
    HEADER CONTENT
  </header>
  <div id="columns" class="container">
    MAIN CONTENT
  </div>
  <footer class="footer">
    <div class="container"> </div>
    <div id="footer-content">
      FOOTER CONTENT
   </div>
  </footer>
</body>

但“列”部分的样式我并不真正希望在内容下方扩展，因此如果可能的话，我希望在页脚部分。

我已经尝试了所有我能想到的方法，但我是一个 CSS 初学者，但没有任何效果。

这个可以吗？

【问题讨论】：

标签： html css flexbox sticky-footer

【解决方案1】：

我在 SCSS 模式下使用 codepen 解决了这个问题，因此我可以嵌套选择器。这让实验变得容易多了。

结果我需要两个 flexbox：一个扩展整个页脚部分以填充可用空间，另一个 在页脚内同样扩展填充容器。

为了便于说明，在每个内容部分添加了 background-color 的代码：

html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  margin: 0;
}
body header {
  background-color: green;
}
body #columns {
  background-color: blue;
}
body #footer-content {
  background-color: red;
}
body .footer {
  flex: 1;
  display: flex;
  flex-direction: column;
}
body .footer .container {
  flex: 1;
}

<body>
  <header>
    HEADER CONTENT
  </header>
  <div id="columns" class="container">
    MAIN CONTENT
  </div>
  <footer class="footer">
    <div class="container"> </div>
    <div id="footer-content">
      FOOTER CONTENT
   </div>
  </footer>
</body>

【讨论】：