将页脚刷新到页面底部,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%;"
使<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
【讨论】:
以上是关于将页脚刷新到页面底部,twitter bootstrap的主要内容,如果未能解决你的问题,请参考以下文章