用于标题，粘滞页脚和垂直对齐的中间内容的CSS Flexbox或CSS网格是否一起？

Question

我有一个要求，我们有Header，Middle Section和Footer。

页眉和页脚高度可以更多或更少，具体取决于各种屏幕尺寸和内容。

如果页面不包含滚动，页脚将在屏幕的末尾粘滞，如果小屏幕滚动，则不应在中间内容上重叠。典型的贴纸页脚行为。

中间部分包含两列。每列内容应垂直居中对齐。

请参考下面的屏幕截图以供参考

注意：我可以使用普通粘性页脚和CALC来调整主要内容的高度，但它不会是动态的。我不想使用javascript在DOMContentLoaded上进行所有数学运算并调整窗口大小。

Answer 1

我的方法使用了一堆flexbox并保持简单。

• .container是一个柱状弹性箱
• main占据了最多的空间
• header，footer只占用他们需要的空间（动态）
• main也是一个flexbox，但在行方向上容纳左右面板
• 面板也是flexbox容器，水平和垂直对中内容
• 您可能希望在“整页”模式或jsFiddle中查看演示

html,
body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  display: flex;
  background-color: #eee;
}

.panel1,
.panel2 {
  background-color: brown;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-content {
  background-color: #ccc;
  padding: 3em;
}

header,
footer {
  background-color: #ccc;
  padding: 1em;
  text-align: center;
}

<div class="container">
  <header>Header</header>
  <main>
    <div class="panel1">
      <div class="panel-content">
        Content
      </div>
    </div>
    <div class="panel2">
      <div class="panel-content">
        Content
      </div>
    </div>
  </main>
  <footer>Sticky Footer</footer>
</div>

jsFiddle