Bootstrap 粘性页脚

Posted 2023-03-06

【中文标题】Bootstrap 粘性页脚

【英文标题】：Bootstrap Sticky Footer

【发布时间】：2014-09-09 19:17:38

【问题描述】：

无论页面上的文本有多少或有多少，让页脚始终保持在页面底部的最佳方法是什么。我尝试了几种不同的想法，但是对于新的引导程序，它不想合作。我已经尝试过修复，但这不是我想要的。

我希望底部的黑色页脚栏始终与页面底部对齐。

我的 CSS：

/* Chrome Frame Prompt
-------------------------------------------------- */
.chromeframe margin: .2em 0; background: #ECCC5B; color: #000000; margin-top: -55px; margin-bottom: 55px; padding: .2em 0; z-index: -100 ; text-align :center; 

/* Bootstrap Styles
-------------------------------------------------- */
.navbar-inverse  background-color: #3A3A3A; border-color: #3A3A3A; 
.navbar-inverse .navbar-brand  color: #BE1E2D; font-weight: bold; margin-top: 12px; padding-left: 40px; 
.navbar-inverse .navbar-toggle  margin-top: 20px; 
.navbar-inverse .navbar-nav>li>a  color: #FFFFFF; height: 75px; padding-top: 28px; 
.navbar-inverse .navbar-nav>li>a:hover  color: #BE1E2D; 
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus  color: #BE1E2D; 
.dropdown-menu  background-color: #080808; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; 
.dropdown-menu>li>a  line-height: 1.6; color: #FFFFFF; 
.dropdown-menu>li>a:hover  line-height: 1.6; color: #BE1E2D; 

/* Main Styles
-------------------------------------------------- */
html, body  position: relative; min-height: 100%; 
body  -webkit-font-smoothing: antialiased; font: normal 16px/1.5; color: #232525; padding-top: 50px; padding-bottom: 20px; 

.logo  float: left; 
.logo:hover  

.main-container  padding-bottom: 100px; 
.main-row  padding-top: 15px; 

.footer  position: absolute; color: #999999; background-color: #000000; bottom: 0; width: 100%; height: 100px;  
.logo-footer  float: left; margin-top: 13px; 
.footer-nav  color: #999999; display: block; float: left; margin: 40px 0 0 15px; 
.footer-copy  float: right; margin: 40px 0 0 0; text-align: left; 

/* RESPONSIVE CSS
--------------------------------------------------*/
@media (max-width:1150px)  


@media (max-width:900px)  


@media (max-width:767px)  
    .navbar-inverse .navbar-nav>li>a  height: 40px; padding-top: 11px; 
    .footer-copy  float: none; text-align: center; 

@media (max-width:340px)  

【问题讨论】：

请澄清您的问题，因为它不是很清楚，请准确描述您想要做什么。

***.com/questions/17966140/…

【参考方案1】：

解决方案是确保您的内容始终至少是屏幕的高度，如果窗口足够大，这将导致页脚被推到屏幕底部。

将您的页面内容（不包括页脚）包装在另一个 <div> 中并按照其样式，将 min-height 设置为 100%

这样做的缺点是页脚现在经常挂在窗口外，要解决这个问题，通过将margin-bottom 设置为页脚的负大小（即，如果您的页脚为 50 像素，margin-bottom: -50px)。

之后您会发现的另一个怪癖是页脚可能会与页面内容重叠，要解决此问题，请将之前的元素插入到包装器 div 中，并使其高度与页脚相同。

例如：

body, html 
    height: 100%;
    margin: 0;


.wrapper 
    min-height: 100%;
    margin-bottom: -50px;


.push 
    height: 50px;


.footer-pad 
    height: 50px;

<div class="wrapper">
    <div class="container>
        Some content
    </div>
    <div class="footer-pad"></div>
</div>
<div class="footer">Footer</div>

需要注意的几个重要事项是 html，body 必须设置为 100% 高度，并且 body 必须没有边距，否则你会得到一个恒定的滚动条

http://jsfiddle.net/XJDLk/

【讨论】：

这并没有解决问题。虽然它看起来解决了问题，但如果有更多内容会导致滚动，它会保持静止。

我只使用过 `width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no` 视口。看看你的 css，你需要将 body、html 设置为 100% 的高度，而不是 min-height

【参考方案2】：

我在最近的 boostrap 网站中使用了它。希望对您有所帮助。

HTML

<div class="footer_wrapper">
    <div class="container">
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
        <div class="col-md-3 col-sm-3">
            content
        </div>
    </div>
</div>

css

.footer_wrapper 
  min-height: 270px;
  background-color: #232323;
  color: #8f8f8f;
  bottom: 0;
  padding-top: 0px;
  width: 100%;