将页脚刷新到页面底部,twitter bootstrap

Posted

技术标签:

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

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

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

【问题讨论】:

在测试下面的所有答案之前,请记住 OP 希望让它与 twitter bootstrap 一起使用。因为它不是必须的,twitter bootstrap 可以与 Jquery 一起使用,这意味着它启用了 javascript。因此只是测试我的答案:***.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 【参考方案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%;" 使&lt;html&gt; 标记占据文档的整个空间。 d-flex 类将display:flex 设置为我们的&lt;body&gt; 标签。 class flex-columnflex-direction:column 设置为我们的&lt;body&gt; 标签。它的孩子(&lt;header&gt;&lt;main&gt;&lt;footer&gt; 和任何其他直接孩子)现在垂直对齐。 class h-100height:100% 设置为我们的&lt;body&gt; 标签,这意味着它将垂直覆盖整个屏幕。 flex-grow-1 类将flex-grow:1 设置为&lt;main&gt;,有效地指示它填充任何剩余的垂直空间,从而达到我们之前在&lt;body&gt; 标签上设置的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


注意

确保将所有内容包装在 &lt;div&gt; 或任何其他具有以下引导类的块级元素中:min-vh-100, d-flex,flex-column,justify-content-between

确保您将除页脚元素之外的所有内容都包装在 &lt;div&gt; 或任何其他块级元素中。

确保使用&lt;footer&gt; 或任何其他块级元素来包装页脚。

代码说明

min-vh-100 确保 body 元素至少伸展到屏幕的整个高度

flex-column 在保留堆叠的块元素方面保持正常文档流的行为(假设正文的直接子元素实际上都是块元素)。

justify-content-between 将页脚推到屏幕底部。


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

【讨论】:

以上是关于将页脚刷新到页面底部,twitter bootstrap的主要内容,如果未能解决你的问题,请参考以下文章

将页脚粘贴到页面底部的方法

javascript 将页脚固定到页面底部

将页脚推到短页面的底部

如何将页脚放在页面底部

将页脚放置在具有固定页眉的页面底部

Vue组件更改时将页脚保留在页面底部