Question

我一直在玩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/

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

更新

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

Answer 1

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

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

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

Answer 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/

Answer 3

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

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

以下是发生的事情：

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

html,
body { height: 100%; }

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

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

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

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

注意：请确保包含任何旧的浏览器样式，并注意Safari 8.有时可能会非常棘手。

Flexbox粘性页脚问题？

3 个答案: