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

Question

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

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

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

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

请引用下面的屏幕截图以了解引用内容

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

Answer 1

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

• .container 是一个柱状 flex 盒子
• 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