使用flexbox和bootstrap创建粘性页脚

Question

使用flexbox和bootstrap创建粘性页脚

10

我正在尝试使用这个粘性页脚：

http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

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

.content{
  flex: 1;
}

但它会在宽度小于768像素的情况下破坏渲染。

有没有简单的CSS修复方法可以使其在所有分辨率下都正常工作？

http://jsfiddle.net/2xvv5mod/

- tachyonflux

4个回答

6

你需要给flexbox项设置width为100%。

在这种情况下，就是.content元素： 更新示例

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.content {
    flex: 1;
}
@media only screen and (max-width: 768px) {
    .content {
        width: 100%;
    }
}

- Josh Crozier

很酷，我认为更好的做法是将其应用于最大宽度为768像素。http://jsfiddle.net/2xvv5mod/1/ - tachyonflux

1

@karaokyo 哦，好的观点。我没有意识到你在使用Bootstrap，尽管你说过你在用它。 - Josh Crozier

我最终选择了 max-width: 100%。 - tachyonflux

3

增加垂直高度对我有用

<body class="d-flex flex-column min-vh-100">
    <nav>this is text</nav>
    <main class="flex-grow-1">this is text</main>
    </footer>this is text</footer>
</body>

- ottz0

0

我建议消除一些混淆，因为代码片段实际上与链接的详细信息不太匹配。此外还有一个拼写错误。只需让框架标签作为固定点工作即可。

<body class="d-flex flex-column">
  <nav></nav>
  <section class="container-fluid flex-grow-1"></section>
  <footer></footer>
</body>

- woodz

1

是的，flex-grow-1 是正确的，但是 body 样式需要是 min-height: 100vh;。 - Muhammad Tarique

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

Bootstrap 4 现在默认使用 flexbox，因此您可以更轻松地获得一个粘性（非固定）页脚而无需使用额外的 CSS。您只需确保 body 具有 min-height ...

body {
  min-height: 100vh; 
}

然后使用flexbox实用类...

<body class="d-flex flex-column">
  <nav></nav>
  <main class="flex-grow"></main>
  </footer></footer>
</body>

Bootstrap 4 弹性盒子固定页脚