Bootstrap – Fill fluid container between header and footer

by

Bootstrap 4 (update 2019)

Now it’s easier to get this layout using flexbox.

<body class="d-flex flex-column">
    <header>
    </header>
    <main class="container-fluid flex-fill">
    </main>
    <footer>
    </footer>
</body>

body {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

Demo

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won’t be needed.

Bootstrap 2 (original 2013 answer)

Any parent containers also have to be 100% height (html,body and #wrapper). If you make #wrapper {height:100%} and add ‘fill-height’ to your container it should work. See here:

http://jsfiddle.net/skelly/NyXkt/4/

#wrapper {
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 auto -33px;
}

More Related Contents:

  1. How to place a div over a image? [closed]
  2. Bootstrap height
  3. Fluid width with equally spaced DIVs
  4. How can I override Bootstrap CSS styles?
  5. Table fixed header and scrollable body
  6. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  7. IE8 issue with Twitter Bootstrap 3
  8. Change Bootstrap tooltip color
  9. Bootstrap 3 two columns full height
  10. Bootstrap 3 collapsed menu doesn’t close on click
  11. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  12. Create a responsive navbar sidebar “drawer” in Bootstrap?
  13. 7 equal columns in bootstrap
  14. Bootstrap print CSS removes background color
  15. How do I add a margin between bootstrap columns without wrapping [duplicate]
  16. Bootstrap navbar: nothing is displayed on smaller devices
  17. Bootstrap 3 Glyphicons CDN
  18. Bootstrap 3: Push/pull columns only on smaller screen sizes
  19. Text-align class for inside a table
  20. What is the purpose of .row in Bootstrap? [duplicate]
  21. How to center buttons in Twitter Bootstrap 3?
  22. Change color of bootstrap navbar on hover link?
  23. Twitter Bootstrap: Center Pills
  24. Why aren’t my bootstrap 4 columns the same height?
  25. Right align text within Bootstrap 4 breadcrumbs
  26. Bootstrap row and col explanation
  27. Bootstrap 3 Flush footer to bottom. not fixed
  28. Responsive table handling in Twitter Bootstrap
  29. justify-content: space-between failing to align elements as expected
  30. bootstrap 4: center inline form inside a jumbotron

Leave a Comment