我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
当前回答
用Haml & Sass的话说就是:
Haml for app/view/layouts/application.html.haml
%html
%head
%body
Some body stuff
%footer
footer content
app/assets/stylesheet /application.css.sass
$footer-height: 110px
html
position: relative
min-height: 100%
body
margin-bottom: $footer-height
body > footer
position: absolute
bottom: 0
width: 100%
height: $footer-height
基于http://getbootstrap.com/examples/sticky-footer-navbar/
其他回答
这个棘手的例子对我不适用。 我的解决方案:
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
}
# myfooter { 高度:3他们; background - color: # f5f5f5; text-align:中心; padding-top: 1 em; } <页脚> < div class = "脚注" > <div class="容器流体" id="myfooter"> < div class = "行" > < div class = " col-md-12”> <p class="copy">版权所有;你的话< / p > < / div > < / div > < / div > < / div > > < /页脚
参考官方的Boostrap3粘性页脚示例, 没有必要添加<div id="push"></div>, CSS更简单。
官方示例中使用的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;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
以及基本的HTML:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
您可以在粘脚示例的源代码中找到这个css的链接。
<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">
完整网址: https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css
我写我的简化粘脚代码与填充使用LESS。这个答案可能离题了,因为这个问题没有谈到填充,所以如果你有兴趣,可以查看这篇文章了解更多细节。
@footer-padding: 40px; // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)
/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;
html {
position: relative;
min-height: 100%;
}
body {
/* This avoids footer to overlap the page content */
margin-bottom: @footer-height;
}
footer{
/* Fix the footer on bottom and give it fixed height */
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
padding: @footer-padding 0;
}
OP回答:
将其添加到CSS文件中。
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 -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #eee;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}