Twitter Bootstrap 3粘性页脚
我已经使用twitter bootstrap框架很长一段时间了，它们最近更新到了版本3！
我很难让粘脚粘到底，我使用了twitter引导网站提供的入门模板，但仍然没有运气，有什么想法吗？
共有3个答案
这里有一个方法可以添加一个粘性页脚，除了Bootstrap中已经存在的内容之外，它不需要任何额外的CSS或Javascript，也不会干扰当前的页脚。
这里的例子：容易粘脚
直接复制并粘贴到你的代码中。不要大惊小怪。
<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>
参考官方Boostrap3粘性页脚示例，无需添加
官方示例中使用的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;
}
以及基本的超文本标记语言：
<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
只需将类navbar fixed bottom添加到页脚。
<div class="footer navbar-fixed-bottom">
-
我想要我的.课程内容粘性的div在桌面视口，不要在页脚以下。我写的位置粘，但它仍然不工作。我做错了什么？这是我的jsfiddle
-
我希望我的引导页面的页脚总是在页面的底部，我找到的解决方案对我不起作用。这里没有提出任何解决方案 把页脚刷到页面底部，推特引导对我不起作用。由于书页的高度不同，这很棘手，对吗？不管我怎么做，页脚下总是有空白。既然我不想要一个固定的页脚，我应该如何实现这一点，因为我的引导网站是响应性的？
-
问题内容： 我正在尝试创建一个包含三个div的页面：页眉，页脚和内容区域。这些应该占据屏幕的100％。 页眉和页脚很小，不会改变，内容区域可以是任何大小，因此我添加了使其变大时滚动的功能。 我正在使用以下CSS设置html和正文高度，因此容器上的技巧将起作用： 我的文档结构为： 问题答案： 方法1-Flexbox 它适用于已知和未知的高度元素。确保设置外股利和重置默认的。 方法2-CSS表 对于已
-
问题内容： 有什么方法可以使用CSS将页脚粘贴到浏览器屏幕的底部或紧随内容之后（取决于哪个较长）， 而无需 提前知道页脚的大小？ 现在，我在容器中使用绝对位置，该容器中放置页脚，并且容器的最小高度为100％，但是如果更改页脚，我必须更改容器底部的填充以匹配其高度。 问题答案： 摘要： 对于具有页眉，内容区域和页脚的网站： 组 将您的身体（或包装div）设置为 将页眉，页脚和内容区域设置为。给您的页
-
我想知道粘性和非粘性会议之间的区别。我从网上读到的： 粘滞：只有一个会话对象将在那里。 非粘性会话：每个服务器节点的会话对象
-
大家好，我试图修复产品页面上的粘性div，但当它到达页脚时，元素与我的内容重叠。我正在使用CSS和js来修复我的div 用于css 还有js 当滚动到页脚时，有没有办法停止滚动？