将页脚刷新到页面底部，twitter bootstrap答案

【问题标题】：Flushing footer to bottom of the page, twitter bootstrap将页脚刷新到页面底部，twitter bootstrap
【发布时间】：2012-04-23 08:57:40
【问题描述】：

我通常熟悉使用 css 刷新页脚的技术。

但我在让这种方法适用于 Twitter 引导程序时遇到了一些麻烦，这很可能是因为 Twitter 引导程序本质上是响应式的。使用 Twitter 引导程序，我无法使用上述博客文章中描述的方法将页脚刷新到页面底部。

【问题讨论】：

在测试下面的所有答案之前，请记住 OP 希望让它与 twitter bootstrap 一起使用。因为它不是必须的，twitter bootstrap 可以与 Jquery 一起使用，这意味着它启用了 Javascript。因此只是测试我的答案：stackoverflow.com/questions/10099422/…
官方例子：getbootstrap.com/examples/sticky-footer-navbar/…
链接已损坏！任何人都可以修复官方示例链接吗？
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar 我猜它可能会因为 4.0 而成为旧版本。
链接到最新版本getbootstrap.com/docs/5.1/examples/sticky-footer

标签： css twitter-bootstrap footer

【解决方案1】：

这是最好的！

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

【讨论】：

您介意解释一下 css 代码中发生了什么吗？

【解决方案2】：

效果很好

html

<footer></footer>

css

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

【讨论】：

【解决方案3】：

在引导程序中使用这段代码就可以了

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

【讨论】：

【解决方案4】：

Bootstrap v4+ 解决方案

这是一个不需要重新考虑 HTML 结构或任何涉及填充的额外 CSS 技巧的解决方案：

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

请注意，此解决方案允许具有灵活高度的页脚，这在为多种屏幕尺寸设计页面并在收缩时自动换行时特别方便。

为什么会这样

style="height:100%;" 使<html> 标记占据文档的整个空间。
d-flex 类将display:flex 设置为我们的<body> 标签。
class flex-column 将flex-direction:column 设置为我们的<body> 标签。它的孩子（<header>、<main>、<footer> 和任何其他直接孩子）现在垂直对齐。
class h-100 将height:100% 设置为我们的<body> 标签，这意味着它将垂直覆盖整个屏幕。
flex-grow-1 类将flex-grow:1 设置为<main>，有效地指示它填充任何剩余的垂直空间，从而达到我们之前在<body> 标签上设置的100% 垂直高度。

这里的工作演示：https://codepen.io/maxencemaire/pen/VwvyRQB

有关 flexbox 的更多信息，请参阅 https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

【讨论】：

h-100 类不能正常工作，最好使用min-vh-100。
@ikonuk “无法正常工作”到底是什么意思？请详细说明。
因为h-100 类总是依赖于父元素的高度，在某些情况下可能无法正常工作。由于我们希望页脚位于视口底部，因此使用视口高度是一个好习惯。
再次定义“某些情况”。你关于父依赖的论点同样适用于min-width。这就是为什么 HTML 标记在代码中的 height 为 100%。该示例有效，但我不明白为什么它不给出 cross-browser support for the CSS height property，这最终是 Bootstrap sn-p 翻译成的。
我没有说你的例子不起作用。不是每个人都使用HTML 标签中的样式。就我而言，您的解决方案不起作用，因为我不喜欢在 HTML 标记中使用该样式。而且我不希望body 标签依赖于另一个父级，而是视口。您不必同时输入style="height:100%;" 和h-100。将min-vh-100 放到正文中就可以完成这项工作，而且代码更少。

【解决方案5】：

使用 Bootstrap 5 将页脚保持在底部


    <div class="min-vh-100 d-flex flex-column 
                justify-content-between">
     
         <div> <!-- Wrapper (Without footer) -->
       
            <header>
             I am a header.
            </header>
      
            <article>
            I am an article!
            </article>
       
        </div> <!-- End: Wrapper (Without footer) -->
     
     
         <footer>
         I am a footer.
         </footer>
     
    </div>

Live Demo in CodePen

注意

确保将所有内容包装在 <div> 或任何其他具有以下引导类的块级元素中：min-vh-100, d-flex,flex-column,justify-content-between 。
确保您将除页脚元素之外的所有内容都包装在 <div> 或任何其他块级元素中。
确保使用<footer> 或任何其他块级元素来包装页脚。

代码说明

min-vh-100 确保 body 元素至少伸展到屏幕的整个高度
flex-column 在保留堆叠的块元素方面保持正常文档流的行为（假设正文的直接子元素实际上都是块元素）。
justify-content-between 将页脚推到屏幕底部。

查看如何仅使用 CSS 执行相同操作（将页脚保持在底部） - Link

【讨论】：