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

【问题标题】：Using flexbox sticky footer with bootstrap使用带有引导程序的 flexbox 粘性页脚
【发布时间】：2015-04-08 00:08:30
【问题描述】：

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

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

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

.content{
  flex: 1;
}

但它会在

任何简单的 css 修复让它适用于所有分辨率？

http://jsfiddle.net/2xvv5mod/

【问题讨论】：

标签： css twitter-bootstrap flexbox

【解决方案1】：

您需要为 flexbox 项指定 width 或 100%。

在这种情况下，就是.content 元素：

Updated Example

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

【讨论】：

酷，我认为最好将它应用到最大宽度：768px。 jsfiddle.net/2xvv5mod/1
@karaokyo 哦，好点。即使您说是，我也没有意识到您正在使用 Bootstrap。
我实际上最终选择了max-width: 100%

【解决方案2】：

Bootstrap 4 现在默认使用 flexbox，因此更容易获得粘性（非固定）页脚，无需为 flexbox 附加 CSS。你只需要确保正文有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 Flexbox Sticky Footer

【讨论】：

@ottz0 有更多的 bootstrap 4 方法来实现这一点。
@Jogai。谢谢，还有关于这个stackoverflow.com/questions/45912296/…和stackoverflow.com/questions/46722697/…的特别bootstrap-4问题

【解决方案3】：

我建议消除一些混淆，因为 sn-p 与 linked details 并不真正匹配。另外它有一个错字。只是让框架标签作为固定点。

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

【讨论】：

是的flex-grow-1 是正确的，但身体风格需要是min-height: 100vh;

【解决方案4】：

添加垂直高度对我有用

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

【讨论】：