Question

什么是最好的方法来获取页脚我试图始终坚持页面的底部无论页面上的文本多少或多少。我尝试了几种不同的想法，但是使用新的引导程序它并不想合作。我试过修复了，这不是我想要的。

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

我的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) { 

}

Answer 1

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

将您的网页内容（不包括页脚）换行到另一个<div>及其样式，将min-height设置为100％

这样做的缺点是，页脚现在不断地从窗口垂下来，以解决这个问题，允许页脚“下沉”＃34;通过将margin-bottom设置为负页脚大小（即如果您的页脚为50px，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/

Answer 2

我在最近的bootstrap网站上使用过这个。希望它有所帮助。

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%;
}

Bootstrap Sticky Footer

2 个答案: