css 粘性页脚与flexbox和网格

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 粘性页脚与flexbox和网格相关的知识，希望对你有一定的参考价值。

html {
  display: flex;
}

body {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header,
.footer {
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
}
<html>
  <body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </body>
</html>
/* In Microsoft Edge 44 there were space below the footer with the previous solution */

html {
  display: flex;
  width: 100%;
  height: 100%;
}
 
body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header,
footer {
  flex-shrink: 0;
}

main {
  flex: 1 0 auto;
}

以上是关于css 粘性页脚与flexbox和网格的主要内容，如果未能解决你的问题，请参考以下文章

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

当其他元素居中对齐时，使用 Flexbox 将页脚与页面底部对齐

css 使用Flexbox添加粘性页脚

css 粘性页脚片段（来源：treehouse flexbox课程）

如何让此页脚与 textarea 对齐？ Flexbox 似乎没有这样做

使用带有引导程序的 flexbox 粘性页脚