使用带有引导程序的 flexbox 粘性页脚
Posted
技术标签:
【中文标题】使用带有引导程序的 flexbox 粘性页脚【英文标题】：Using flexbox sticky footer with bootstrap 【发布时间】：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/
【问题讨论】：
【参考方案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。谢谢，还有关于这个***.com/questions/45912296/…和***.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>
【讨论】：
以上是关于使用带有引导程序的 flexbox 粘性页脚的主要内容，如果未能解决你的问题，请参考以下文章