flexbox 可以通过扩展上一个页脚部分来 'sticky' 最后一个页脚部分吗？

Question

鉴于下面的基本 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>

但是 'columns' 部分的样式我真的不想扩展到内容下方，所以如果可能的话，我更愿意扩展倒数第二个 empty div (.container) 在页脚部分。

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

这可以做到吗？

Answer 1

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

原来我需要两个 flexboxes：一个扩展整个页脚部分以填充可用的 space，另一个 在页脚 内扩展填充容器同样。

为了便于说明，将 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>

flexbox 可以通过扩展上一个页脚部分来 'sticky' 最后一个页脚部分吗？

Can flexbox be used to 'sticky' the last footer section by expanding the previous footer section?

html

css

flexbox

sticky-footer