Flexbox 粘滞页脚问题？答案

【问题标题】：Flexbox Sticky Footer Issue?Flexbox 粘滞页脚问题？
【发布时间】：2014-05-26 10:35:57
【问题描述】：

我一直在使用 Flexbox 尝试制作一个粘性页脚，但出于某种原因，我的一个 div 与页脚重叠？当我将窗口拖到更大的显示器时，页脚是完美的。我做错了什么？

另外，我更喜欢使用这种方法而不是其他方法，例如table 方法。

这是我的 Html 布局：

<body>
    <div class="mainContent">...</div>
    <div class="footer">...</div>
</body>

在我的mainContent div 中，我拥有网站的完整顶部，包括标题。我只需要将它用作整个内容，然后有我的页脚。

这是我拥有的 CSS：

body
{
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

.mainContent
{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex: 1;
}

.footer
{
    height: 75px; 
    background: #222;
    color:#EEE;
}

我什至试过这个：http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

但我遇到的问题与我目前遇到的相同。

更新

根据 cmets 的要求，我将主要内容 div 设置为 overflow: auto;，但我的内容被页脚覆盖。我将如何解决这个问题？

【问题讨论】：

这不是 flex 问题，如果你设置 mainContent overflow: hidden 它是固定的，所以 flex 覆盖工作正常。而是重新排列 maincontent 内容。
@vals 好的，谢谢，但这并不能解决我的问题。为什么内容现在被推到页脚下而不是页脚被下推？
另外，@vals，我不能重新排列我的 html？或者你只是在谈论布局？
我知道隐藏 mainContent 溢出不是解决方案。这是一条线索，告诉您问题出在 inside mainContent，而不是在 body 和 mainContent 之间的弹性框中。您必须查看 mainContent 内部，了解为什么它需要比可用空间更多的空间，然后修复它
@vals 是的，我知道。我做了一些挖掘，发现我在 mainCONntent 中的内容 div 具有绝对定位。请张贴你的答案。谢谢

标签： html css flexbox

【解决方案1】：

您需要在 CSS 中添加更多规则才能获得您想要的结果。就像现在一样，它基本上是在说明当空间减少时，您的主要内容应该占用更多空间。因此，页脚并没有真正重叠，而是它的大小减小了。

这是我几个月前所做的事情...... css 中的许多规则都是遗留的，所以要小心，但我相信它接近你的目标： http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview

但我真的鼓励你使用它来创建你的 flex css 规则： http://the-echoplex.net/flexyboxes/

【讨论】：

【解决方案2】：

我花了很多时间才找到这些使用 CSS3 Flexbox 或 Grid 来解决这个问题的快速而强大的解决方案。我希望这有帮助。

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

这应该适用于 IE 和 Chrome：

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

main {
  flex: 1 0 auto;
}

footer, header {
    flex-shrink: 0;
}

你也可以试试网格布局

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
}

footer {
  grid-row: 3/4;
}

参考我的网站：http://matthiassommer.it/web/javascript/sticky-footer-css3-flexbox-grid/

【讨论】：

【解决方案3】：

我知道答案已被接受，但我这里有一个非常简单的示例，仅使用您需要的代码（以及一些用于演示的 javascript）。

https://codepen.io/alexmccabe/pen/RgMBjJ

这是正在发生的事情：

首先将body 和html 设置为浏览器高度的100%。

html,
body { height: 100%; }

然后设置一个包装器元素，使其具有 100% 的 min-height，并显示 flex。该列确保元素不会彼此相邻。

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

现在页脚得到auto 中的margin-top。它位于浏览器窗口的底部。

.site-footer {
    margin-top: auto;
}

注意：确保包含所有旧的浏览器样式，并注意 Safari 8。有时这可能会很棘手。

【讨论】：