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知道了这一点，因此可以嵌套选择器。这使实验变得更加容易。

事实证明，我需要两个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>

通过扩展前一个页脚节，可以使用flexbox来“粘贴”最后一个页脚节吗？

1 个答案: