刷新页脚到页面底部,twitter bootstrap
Cal*_*eng 291 css footer twitter-bootstrap
我通常熟悉使用CSS刷新页脚的技巧.
但是我在使用这种方法为Twitter引导工作时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的.使用Twitter bootstrap我无法使用上面博客文章中描述的方法让页脚刷新到页面底部.
san*_*non 454
这现在包含在Bootstrap 2.2.1中.
Bootstrap 3.x
使用navbar组件并添加.navbar-fixed-bottom类:
<div class="navbar navbar-fixed-bottom"></div>
Bootstrap 4.x
<div class="navbar fixed-bottom"></div>
不要忘记添加body { padding-bottom: 70px; }或以其他方式覆盖页面内容.
文档:http://getbootstrap.com/components/#navbar-fixed-bottom
- @ChuanYeong不幸的是没有`navbar-static-bottom`. (34认同)
- @MikeCurry他没有问过一个固定的页脚,而是一个"填满"空白区域的页面,如果你的页面没有足够的内容让页脚停留在底部.如果您的页脚只是提供信息,那么固定页脚只占用宝贵的空间. (23认同)
- 这不是粘性页脚,因为它是使用位置:固定; 这是不对的 (21认同)
- 是的,此解决方案仅刷新到视口底部而不是页面底部.即页脚始终可见. (8认同)
- 不得不低估答案,因为它给人一种困惑.OP不想要一个粘性的页脚. (2认同)
小智 314
发现这里的片段非常适合bootstrap
HTML:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
- 如果您已经阅读了这个答案而没有向下滚动,那么值得查看其他答案 (84认同)
- 特别是这一个:http://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap/20971428#20971428 (3认同)
- 这是我为 Bootstrap 找到的最好方法。为了提高设备响应能力，请记住使用媒体查询来更新不同屏幕尺寸的 #main 和 .footer 高度 (2认同)
Hen*_*ryW 74
Twitter bootstrap的一个工作示例NOT STICKY FOOTER
<script>
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight)
$('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>
你至少需要一个带元素的元素 #footer
如果内容适合屏幕而不想要滚动条,只需将10的值更改为0
如果内容不适合屏幕,则会显示滚动条.
- 它没有安静,也没有为我预期,仍然是一个更好的答案,我通过替换`$('#footer').height();`与`$('#footer')修复我的问题.externalHeight ();` (12认同)
- 是的,我也选择了这个.CSS有时候会非常愚蠢.这不是不可能的,但通用解决方案很难实现,在我们的布局中修复这样的烦人事情不应该去堆栈交换,多个gist修订,交叉浏览测试,最终投降到一个简单的JS特技.是的,我觉得有点脏,但至少它有效. (9认同)
- 我找到的最佳答案.如果你希望它在窗口调整大小后工作,只需将答案中的主要代码放在`$(window).resize(function(){// main code goes here});`并调用`$(window).resize( );`在页面加载时设置它. (5认同)
- 好答案！我进行了一些修改，我认为可以在此处进行改进：http://stackoverflow.com/a/36385654/8207 (3认同)
- 我看过的每一个解决方案都是错误的.这是唯一一个实际执行它应该做的事情 - 将页脚粘贴到页面底部,而不会在浏览器调整大小时模糊任何内容. (2认同)
Len*_*rri 34
以下是从官方页面实现此操作的方法:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
我刚刚测试了它,它工作得很棒!:)
HTML
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>
相关的CSS代码是这样的:
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -30px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 30px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
- 感谢发布这个,它绝对是我的特定项目的最佳解决方案(更不用说唯一有效的解决方案)了,当然它很好直接来自项目本身. (6认同)
san*_*eep 33
对于Sticky Footer,我们DIV's在HTML中使用两个用于基本粘性页脚效果.像这样写:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
- 他说他正在使用Twitter Bootstrap.如果不完全重写HTML,最简单的方法是将它集成到Bootstrap中？ (6认同)
use*_*ser 29
更简单的官方示例:http://getbootstrap.com/examples/sticky-footer-navbar/
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
Ras*_*him 27
使用 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>
笔记
确保
<div>使用以下 Bootstrap 类将所有内容包装在 a 或任何其他块级元素中：min-vh-100, d-flex,flex-column,justify-content-between。确保将除页脚元素之外的所有内容都包装在 a
<div>或任何其他块级元素中。确保您使用
<footer>或任何其他块级元素来包裹页脚。
代码说明
min-vh-100确保 body 元素至少拉伸到屏幕的整个高度flex-column在保留堆叠块元素方面保持正常文档流的行为（假设正文的直接子元素确实都是块元素）。justify-content-between将页脚推到屏幕底部。
查看如何仅使用 CSS 执行相同操作（将页脚保持在底部） -链接
小智 23
使用 Bootstrap 4 内置的 flex 实用程序！这是我主要使用 Bootstrap 4 实用程序的想法。
<div class="d-flex flex-column" style="min-height: 100vh;">
<header></header>
<div class="container flex-grow-1">
<div>Some Content</div>
</div>
<footer></footer>
</div>
.d-flex使主 div 成为一个 flex 容器.flex-column在主 div 上将您的弹性项目排列在一列中min-height: 100vh到主 div，使用样式属性或在您的 CSS 中，以垂直填充视口.flex-grow-1在容器上，使主内容容器占据视口高度中剩余的所有空间的元素。
- 可以使用 Bootstrap 中的“min-vh-100”类来代替“min-height: 100vh”。 (5认同)
- 这个解决方案非常有效，包括 @ikonuk 的 min-vh-100 建议 (3认同)
- 我只想说一声谢谢！ (2认同)
Max*_*tin 18
好吧,我发现navbar-inner和的 混合navbar-fixed-bottom
<div id="footer">
<div class="navbar navbar-inner navbar-fixed-bottom">
<p class="muted credit"><center>ver 1.0.1</center></p>
</div>
</div>
它似乎很好,适合我
参见中的示例 Fiddle
- 最简单,最优雅的解决方案.对家庭酿造你自己的css代码持怀疑态度,因为它不会向后兼容bootstrap (2认同)
Moh*_*OUI 14
在最新版本的bootstrap 4-alpha中,我能够使用.fixed-bottom类来完成它.
<div class="fixed-bottom"></div>
这是我如何使用它与页脚:
<footer class="footer fixed-bottom container">
<hr>
<p>© 2017 Company, Inc.</p>
</footer>
您可以在此处的展示位置文档中找到更多信息.
Cor*_*ory 12
HenryW的答案很好,但我需要做一些调整才能让它按照我想要的方式工作.特别是以下处理:
- 通过首先在javascript中标记不可见和设置可见来避免页面加载上的"跳跃"
- 处理浏览器优雅地调整大小
- 此外,如果浏览器变小并且页脚变得比页面大,则将页脚设置回页面
- 高度函数调整
这些调整对我有用:
HTML:
<div id="footer" class="invisible">My sweet footer</div>
CSS:
#footer {
padding-bottom: 30px;
}
JavaScript的:
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $('#footer').outerHeight();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', (docHeight - footerTop) + 'px');
} else {
$('#footer').css('margin-top', '');
}
$('#footer').removeClass('invisible');
}
$(document).ready(function() {
setFooterStyle();
window.onresize = setFooterStyle;
});
sp_*_*mer 11
这对我很有用.
将此类navbar-fixed-bottom添加到页脚.
<div class="footer navbar-fixed-bottom">
我用它是这样的:
<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>
并且它在整个宽度上设置为底部.
编辑:这将设置页脚始终可见,这是您需要考虑的事项.
And*_*ich 10
你需要包装你的.container-fluiddiv以便你的粘性页脚工作,你也错过了你.wrapper班上的一些属性.试试这个:
padding-top:70px从您的body代码中删除并将其包含在您的代码中.container-fluid,如下所示:
.wrapper > .container-fluid {
padding-top: 70px;
}
我们必须这样做,因为body向下推动以容纳导航栏最终将页脚推进到视口之后(70px更远),因此我们得到一个滚动条.我们得到更好的结果推动.container-fluiddiv.
接下来我们必须删除div .wrapper之外的类.container-fluid并#main用它包装div,如下所示:
<div class="wrapper">
<div id="main" class="container-fluid">
<div class="row-fluid">...</div>
<div class="push"></div>
</div>
</div>
你的页脚当然必须不在.wrapperdiv中,所以将它从`.wrapper div中删除并将其放在外面,如下所示:
<div class="wrapper">
....
</div>
<footer class="container-fluid">
....
</footer><!--END .row-fluid-->
完成所有操作后,.wrapper使用负边距正确地将您的页脚推向您的班级,如下所示:
.wrapper {
min-height: 100%;
height: auto !important; /* ie7 fix */
height: 100%;
margin: 0 auto -43px;
}
这应该有用,虽然你可能需要修改一些其他的东西,以便在调整屏幕大小时使其工作,比如重置.wrapper类的高度,如下所示:
@media (max-width:480px) {
.wrapper {
height:auto;
}
}
这是使用Twitter Bootstrap和新的navbar-fixed-bottom类的正确方法:(你不知道我花了多长时间寻找这个)
CSS:
html {
position: relative;
min-height: 100%;
}
#content {
padding-bottom: 50px;
}
#footer .navbar{
position: absolute;
}
HTML:
<html>
<body>
<div id="content">...</div>
<div id="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap v4+ solution
Here's a solution that doesn't require rethinking the HTML structure or any additional CSS trickery involving padding:
<html style="height:100%;">
...
<body class="d-flex flex-column h-100">
...
<main class="flex-grow-1">...</main>
<footer>...</footer>
</body>
...
</html>
Note that this solution allows for footers with flexible heights, which particularly comes in handy when designing pages for multiple screen sizes with content wrapping when shrunk.
Why this works
style="height:100%;"makes the<html>tag take the whole space of the document.- class
d-flexsetsdisplay:flexto our<body>tag. - class
flex-columnsetsflex-direction:columnto our<body>tag. Its children (<header>,<main>,<footer>and any other direct child) are now aligned vertically. - class
h-100setsheight:100%to our<body>tag, meaning it will cover the entire screen vertically. - class
flex-grow-1setsflex-grow:1to our<main>, effectively instructing it to fill any remaining vertical space, thus amounting to the 100% vertical height we set before on our<body>tag.
Working demo here: https://codepen.io/maxencemaire/pen/VwvyRQB
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more information on flexbox.
- 我并没有说你的例子不起作用。并不是每个人都使用“HTML”标签中的样式。就我而言，您的解决方案不起作用，因为我不喜欢使用“HTML”标记中的样式。我不希望“body”标签依赖于视口之外的另一个父级。您不必同时放置 `style="height:100%;"` 和 `h-100`。将“min-vh-100”放入正文即可完成工作，并且代码更少。 (2认同)
| 归档时间： |
|
| 查看次数： |
541912 次 |
| 最近记录： |