Twitter Bootstrap 3 Sticky Footer

我已经使用twitter引导框架很长一段时间了，他们最近更新到版本3!

我有麻烦让粘性页脚粘到底部，我已经使用了twitter bootstrap网站提供的启动器模板，但仍然没有运气，有什么想法吗?

346049 次浏览
小开

除了刚才添加的CSS，记住在关闭wrap div之前还需要添加推动div

HTML的基本结构是

<div id="wrap">
page content here
<div id="push"></div>
</div> <!-- end wrap -->


<div id="footer">
footer content here
</div> <!-- end footer -->
< p > 实时视图 < br > 编辑视图 < / p >
小开

推送div应该紧跟在wrap之后，而不是在..就像这样

<div id="wrap">
*content goes here*
</div>


<div id="push">
</div>


<div id="footer">
<div class="container credit">
</div>
<div class="container">
<p class="muted credit">© Your Page 2013</p>
</div>
</div>
小开
参考官方的Boostrap3 sticky footer示例， 不需要添加<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>

你可以在sticky-footer例子的源代码中找到这个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 < / p >

小开

只需将类navbar-fixed-bottom添加到页脚。

<div class="footer navbar-fixed-bottom">
小开

这里是今天的Sticky Footer简化代码，因为他们总是在优化它，这很好:

超文本标记语言

<!DOCTYPE html>
<html lang="en">
<head></head>


<body>


<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>


<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>


<footer>
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>


</body>
</html>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
小开

在Haml &尖刻的话是必要的:

Haml for app/view/layouts/application.html.haml

%html
%head
%body
Some  body stuff


%footer
footer content

Sass for app/assets/stylesheets/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/

小开

我对这个主题有点晚了，但我偶然发现了这篇文章，因为我刚刚被这个问题咬了一口，最后找到了一个非常简单的方法来克服它，简单地使用navbar，启用navbar-fixed-bottom类。例如:

<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<span class="navbar-text">
Something useful
</span>
</div>
</div>

HTH

小开
这个棘手的例子对我不起作用。 我的解决方案:< / p > 
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
}
小开

以下是我对这个问题的最新解决方案。

 /* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}




body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;


border-top: 1px solid #eee;
text-align: center;
}


.site-footer-links {
font-size: 12px;
line-height: 1.5;
color: #777;
padding-top: 20px;
display: block;
text-align: center;
float: center;
margin: 0;
list-style: none;
}

像这样使用它:

<div class="footer">
<div class="site-footer">
<ul class="site-footer-links">
<li>© Zee and Company<span></span></li>
</ul>
</div>


</div>

或

html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
小开

总结所有这些，只要记住一件事，除了页脚以外的所有东西都应该有min-height: 100%或更少。

小开

如果你想在类中使用自举构建页脚。你还应该写一些javascript:

$(document).ready(function(){
$.fn.resize_footer();


$(window).resize(function() {
$.fn.resize_footer();
});
});


(function($) {


$.fn.resize_footer = function(){
$('body > .container-fluid').css('padding-bottom', $('body > footer').height());
};
});

它将防止固定页脚的内容重叠，并且当用户更改窗口/屏幕大小时，它将调整padding-bottom。

在上面的脚本中，我假设footer直接放置在body标签中，就像这样:

<body>
... content of your page ...
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="muted pull-right">
Something useful
</div>
... some other footer content ...
</div>
</div>
</body>

这绝对不是最好的解决方案(因为JS可以避免)，但它没有任何重叠的问题，它很容易实现和响应(height不是硬编码在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;
}
小开

. 
#myfooter{
height: 3em;
background-color: #f5f5f5;
text-align: center;
padding-top: 1em;
}
<footer>
<div class="footer">
<div class="container-fluid"  id="myfooter">
<div class="row">
<div class="col-md-12">
<p class="copy">Copyright &copy; Your words</p>
</div>
</div>
</div>
</div>
</footer>

小开

这里有一个方法，将添加一个粘脚，不需要任何额外的CSS或Javascript，除了什么已经在Bootstrap，不会干扰你当前的页脚。

示例:易粘脚

只需复制并粘贴到您的代码。不吵闹不混乱。

<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
<a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
</p>


<a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
</div>
</div>
小开

这是一个非常简单和干净的粘性页脚，你可以在bootstrap中使用。完全响应!

超文本标记语言

<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
<footer></footer>
</body>
</html>

CSS

html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: red;
}

例如:CodePen演示

小开

简单的js

if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}

Update # 1

$(window).on('resize', function() {
$('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
小开

基于Jek-fdrv的回答，我添加了一个.on('resize', function()，以确保它在每个设备和每个分辨率上都能工作:

$(window).on('resize', function() {
if ($(document).height() <= $(window).height()) {
$('footer').addClass("navbar-fixed-bottom");
} else {
$('footer').removeClass("navbar-fixed-bottom");
}
});
小开

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;
}
}
小开

你可以简单地尝试在页脚导航栏上添加一个类:

navbar-fixed-bottom

然后创建一个名为custom.css和身体填充的CSS，如下所示。

body { padding-bottom: 70px; }
小开

我想要一个柔性粘性页脚，这就是我来这里的原因。最重要的答案让我找到了正确的方向。

当前(10月16日2日)Bootstrap 3 css Sticky footer(固定大小)看起来像这样:

html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}

只要页脚的大小是固定的，body margin-bottom就会产生一个推力，让页脚可以坐进去。在本例中，两者都设置为60px。但如果页脚不是固定的，高度超过60px，它将覆盖你的页面内容。

使灵活:删除css正文边距和页脚高度。然后添加JavaScript来获取页脚高度，并设置body的marginBottom。这是通过setfooter()函数完成的。接下来添加事件监听器，用于页面第一次加载和调整大小时运行setfooter。注意:如果你的页脚有一个手风琴或其他触发大小变化的东西，而没有调整窗口的大小，你必须再次调用setfooter()函数。

运行代码片段，然后全屏演示。

function setfooter(){
var ht = document.getElementById("footer").scrollHeight;
document.body.style.marginBottom = ht + "px";
}


window.addEventListener('resize', function(){
setfooter();
}, true);
window.addEventListener('load', function(){
setfooter();
}, true);
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
  

/* additional style for effect only */
text-align: center;
background-color: #333;
color: #fff;
}
  





body{
/* additional style for effect only not needed in bootstrap*/
padding:0;
margin: 0;
}
<div>
Page content
<br>  <br>
line 3
<br>  <br>
line 5
<br>  <br>
line 7
  

</div>




<footer id="footer" class="footer">
<div class="container">
<p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
</div>
</footer>

小开

当前版本的bootstrap似乎不再适用于这个函数了。如果你下载了他们的sticky-footer-navbar的例子，并在主体区域放置了大量的内容，footer将被向下推过视口的底部。它一点也不粘。

小开
这是一个基于CSS的完全响应可变高度粘脚的解决方案 优点:页脚允许可变高度，因为高度不再需要在CSS中硬编码。

body {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
body > * {
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
body > nav + .container {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}






/* Reset CSS and some footer styling. Only needed on StackOverflow */
body {
padding: 50px 0 0;
margin: 0;
}
footer {
background-color: #f8f8f8;
padding: 15px 0 5px;
border-top: 1px solid #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>


<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>


<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Responsive sticky footer of any height</h1>
</div>
<p class="lead">You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.</p>
      

</div>


<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
<p class="text-muted">And some more content.</p>
<p class="text-muted">And more...</p>
</div>
</footer>

这里是没有前缀的SCSS(用于gulp/grunt):

body {
display: flex;
flex-direction: column;
min-height: 100vh;
> * {
flex-grow: 0;
}
> nav + .container {
flex-grow: 1;
}
}
小开

使用flexbox是我从css技巧的家伙那里找到的最简单的方法。这是真正的粘脚，当内容是<100%的页面和> 100%的页面:

<body>
<div class="content">
content
</div>
<footer></footer>
</body>

和CSS:

html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}

请注意，这是bootstrap-不可知论的，所以它可以使用bootstrap，也可以不使用bootstrap。

小开

使用flex!确保在HTML中使用body和main，这是最好的解决方案之一(除非你需要IE9支持)。它不需要固定的高度或类似的东西。

这也推荐用于Materialize !

body {
display: flex;
min-height: 100vh;
flex-direction: column;
}


main {
flex: 1 0 auto;
}
小开

这个问题已经被flexbox彻底解决了:

< a href = " https://philipwalton.github。Io /solve -by-flexbox/demos/sticky-footer/" rel="nofollow noreferrer">https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ .

HTML

<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>

CSS

.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}


.Site-content {
flex: 1;
}
小开

超文本标记语言

<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>

CSS

.footer {
position: fixed;
bottom: 0;
}

提交答案