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

Posted 2023-03-05

【中文标题】用于页眉、粘滞页脚和垂直对齐的中间内容的 CSS Flexbox 或 CSS 网格？

【英文标题】：CSS Flexbox or CSS Grid for Header, Sticky Footer and Vertically Aligned Middle Content all together?

【发布时间】：2019-07-12 12:04:19

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

this answer 可能会帮助您入门...

谢谢@kukkuz，但您建议的答案不适合给定的场景。

添加您的代码。谢谢

您希望页脚始终可见吗？并且您不希望页脚与正文内容重叠？？

虽然这个想法很像移动应用程序，但是我们这里没有代码，除非你希望有人完全为你做这件事，否则 *** 可能不是正确的地方。

【参考方案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