Flushing footer to bottom of the page, twitter boo-第3页回答

I am generally familiar with the technique of flushing a footer using css and this following approach.

But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. Using Twitter bootstrap I am not able to get the footer to flush to the bottom of the page using the approach described in the above blog post.

标签： css twitter-bootstrap footer

26条回答

可以哭但决不认输i

2楼-- · 2019-01-04 05:01

Well I found mix of navbar-inner and navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

It seems good and works for me

enter image description here

See example in Fiddle

0人赞添加讨论(0) 举报

走好不送

3楼-- · 2019-01-04 05:01

Use the below class to push it to last line of the page and also make it to center of it. If you are using ruby on rails HAML page you can make use of the below code. %footer.card.text-center

Pls don't forget to use twitter bootstrapp

0人赞添加讨论(0) 举报

我想做一个坏孩纸

4楼-- · 2019-01-04 05:02

For Sticky Footer we use two DIV's in the HTML for basic sticky footer effect. Write like this:

HTML

<div class="container"></div>

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

0人赞添加讨论(0) 举报

地球回转人心会变

5楼-- · 2019-01-04 05:03

This worked for me perfectly.

Add this class navbar-fixed-bottom to your footer.

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

I used it like this:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

And it sets to bottom over the the full width.

Edit: This will set footer to always visible, it's something you need to take in consideration.

0人赞添加讨论(0) 举报

Root（大扎）

6楼-- · 2019-01-04 05:03

This is the right way to do it with Twitter Bootstrap and the new navbar-fixed-bottom class: (you have no idea how long I spent looking for this)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

0人赞添加讨论(0) 举报

够拽才男人

7楼-- · 2019-01-04 05:07

The only one that worked for me!:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

0人赞添加讨论(0) 举报

Flushing footer to bottom of the page, twitter boo

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间