CSS Flexbox 或 CSS Grid 用于页眉、粘性页脚和垂直对齐的中间内容？

Question

我有一个要求，我们有页眉、中间部分和页脚。

页眉和页脚的高度可以或多或少取决于不同的屏幕尺寸和其中的内容。

如果页面不包含滚动，则页脚将位于屏幕末尾，如果小屏幕发生滚动，则页脚不应与中间内容重叠。典型的贴纸页脚行为。

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

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

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

Answer 1

我的方法使用了一堆弹性盒并使事情变得简单。

• .container是一个柱状弹性盒
• main占用最多的可用空间
• header，footer只占用他们需要的空间（动态）
• main也是一个弹性盒，但在行方向上容纳左右面板
• 面板也是弹性盒容器，其内容水平和垂直居中
• 您可能想在“全页”模式或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