Flushing footer to bottom of the page, twitter bootstrap

问题

I am generally familiar with the technique of flushing a footer using css.

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.

回答1:

Found the snippets here works really well for bootstrap

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

回答2:

This is now included with Bootstrap 2.2.1.

Bootstrap 3.x

Use the navbar component and add .navbar-fixed-bottom class:

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

Bootstrap 4.x

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

Don't forget to add body { padding-bottom: 70px; } or otherwise the page content may be covered.

Docs: http://getbootstrap.com/components/#navbar-fixed-bottom

回答3:

A working example for Twitter bootstrap NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Version that always updates in case user opens devtools or resizes window.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

You need at least an element with a `#footer`

When not want the scrollbar if content would fit to screen just change the value of 10 to 0
The scrollbar will show up if content not fits to screen.

回答4:

Here's how to implement this from the official page:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

I just tested it right now and it WORKS GREAT! :)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</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.</p>
      </div>

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

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

The relevant CSS code is this:

/* 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 !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

回答5:

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

回答6:

Much simpler official example: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

回答7:

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

See example in Fiddle

回答8:

In the latest version of bootstrap 4.3, this can be done using .fixed-bottom class.

<div class="fixed-bottom"></div>

Here's how I use it with the footer:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

You can find more information in the position documentation here.

回答9:

HenryW's answer is good, though I needed a few tweaks to get it working how I wanted. In particular the following also handles:

Avoiding the "jumpiness" on page load by first marking invisible and setting visible in javascript
Dealing with browser resizes gracefully
Additionally setting the footer back up the page if the browser gets smaller and the footer becomes bigger than the page
Height function tweaks

Here's what worked for me with those tweaks:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

回答10:

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.

回答11:

You need to wrap your .container-fluid div in order for your sticky footer to work, you're also missing some properties on your .wrapper class. Try this:

Remove the padding-top:70px from your body tag and include it in your .container-fluid instead, like so:

.wrapper > .container-fluid {
    padding-top: 70px;
}

We have to do this because pushing the body down to accommodate the navbar ends up pushing the footer a bit further (70px further) past the viewport so we get a scrollbar. We get better results pushing the .container-fluid div instead.

Next we have to remove the .wrapper class outside your .container-fluid div and wrap your #main div with it, like so:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Your footer of course has to be out of the .wrapper div so remove it from the `.wrapper div and place it outside, like so:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

After thats all done, properly push your footer closer to your .wrapper class by using a negative margin, like so:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

And that should work, though you're probably going to have to modify a few other things to make it work when the screen is resized, like resetting the height on the .wrapper class, like so:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

回答12:

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>

回答13:

Use the navbar component and add .navbar-fixed-bottom class:

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

add body

  { padding-bottom: 70px; }

回答14:

to handle width constraint layouts use the following so that you do not get rounded corners, and so that your nav bar will be flush to the sides of the application

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

then you can use css to override the bootstrap classes to adjust height, font, and color

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

回答15:

You can use jQuery to handle this:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

回答16:

Use the flex utilities built into Bootstrap 4! Here's what I've come up with using mostly Bootstrap 4 utilities.

<div class="d-flex flex-column" style="min-height: 100vh">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

.d-flex to make the main div a flex container
.flex-column on the main div to arrange your flex items in a column
min-height: 100vh to the main div, either with a style attribute or in your css, to fill the viewport vertically
.flex-grow-1 on the container element to have the main content container take up all the space that remains in the viewport height.

回答17:

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

回答18:

The simplest technique is probably to use Bootstrap navbar-static-bottom in conjunction with setting the main container div with height: 100vh (new CSS3 view port percentage). This will flush the footer to the bottom.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

回答19:

Tested with Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

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

回答20:

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

The footer height matches the size of the bottom indent of the wrap element.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

回答21:

Per the Bootstrap 4.3 example, in case you're losing your sanity like I did, this is how it actually works:

All parents of the footer div need to have height: 100% (h-100 class)
The direct parent of the footer needs to have display: flex (d-flex class)
The footer needs to have margin-top: auto (mt-auto class)

The problem is that in modern front-end frameworks we often have additional wrappers around these elements.

For example in my case, with Angular, I composed the view from a separate app root, main app component, and footer component - all of which added their custom element to the DOM.

So, to make it work, I had to add classes to these wrapper elements: an additional h-100, moving the d-flex one level down, and moving the mt-auto one level up from the footer (so actually it's not on the footer class anymore, but on my <app-footer> custom element).

回答22:

It looks like the height:100% 'chain' is being broken at div#main. Try adding height:100% to it and that may get you closer to your goal.

回答23:

Here you'll find the approach in HAML ( http://haml.info ) with navbar on top and footer at the bottom of the page:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

回答24:

Keep it simple.

footer {
  bottom: 0;
  position: absolute;
}

You may need to also offset the height of the footer by adding a margin-bottom equivalent to the footer height to the body.

回答25:

Here is an example using css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

fiddle

回答26:

This is how bootstrap does it:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Just use page source and you should be able to see. Don' forget the <div id="wrap"> an the top.

回答27:

another possible solution, just using media queries

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

回答28:

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

回答29:

Here's a solution for the newest version of Bootstrap (4.3 at time of writing) using Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

And a codepen example: https://codepen.io/tillytoby/pen/QPdomR

回答30:

HTML

<div id="wrapper">

  <div id="content">
    <!-- navbar and containers here -->
  </div>

  <div id="footer">
   <!-- your footer here -->
  </div>

</div>

CSS

html, body {
  height: 100%;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

#content {
  padding-bottom: 100px; /* Height of the footer element */
}

#footer {
  width: 100%;
  height: 100px; /* Adjust to the footer needs */
  position: absolute;
  bottom: 0;
  left: 0;
}

来源：https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap

标签

css

twitter-bootstrap

footer

Flushing footer to bottom of the page, twitter bootstrap

问题

回答1:

回答2:

回答3:

You need at least an element with a #footer

回答4:

回答5:

回答6:

回答7:

回答8:

回答9:

回答10:

回答11:

回答12:

回答13:

回答14:

回答15:

回答16:

回答17:

回答18:

回答19:

回答20:

回答21:

回答22:

回答23:

回答24:

回答25:

回答26:

回答27:

回答28:

回答29:

回答30:

You need at least an element with a `#footer`