Bootstrap - Fill Fluid Container Between Header and Footer

Bootstrap - Fill fluid container between header and footer

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

Can't make 100% div height between header and footer with Bootstrap 4

Flexbox is your friend here too.

However, before you read any further: you should not use the alpha version of Bootstrap 4 any more as beta 2 is out!

.container {    border: solid blue; }
html {    height: 100%;}body {    display: flex;    flex-direction: column;    min-height: 100vh;}
main {    flex: 1;    margin-top: 56px;}
footer {    height: 10vh;}
<header>    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">            <span class="navbar-toggler-icon"></span>        </button>        <a class="navbar-brand" href="#" data-placement="right" data-animation="false" data-toggle="tooltip" title="Aller à Mes Summaries">My Logo</a>    </nav></header>

<!-- Begin page content --><main role="main" class="container">    <div class="row mt-3" style="border: solid green">        <div class="col-sm-12 col-md-3" style="border: solid red; height: 200%;">col</div>        <div class="col-sm-12 col-md-5">col</div>        <div class="col-sm-12 col-md-4">col</div>    </div></main>
<footer>    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse h-100"></nav></footer>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

To fix the container-fluid in between fixed-top and fixed-bottom

If header and footer height is known, use margins : 

header {  background: red;  height: 100px;}
footer {  background: green;  height: 70px;}
.container {  background: white;  margin-bottom: 70px;  margin-top: 100px;}
<!DOCTYPE html><html lang="en">
<head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>  <header class="fixed-top">HEADER</header>  <div class="container">FIRST CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT LAST </div>  <footer class="fixed-bottom">FOOTER</footer></body>
</html>

Style the content (body) element to cover entire space between a header and a footer

Here is a solution using only css:

.container-fluid {
  height: 100vh;
  overflow-x: hidden;
}

.col-12 {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header {
  position: sticky;
  top: 0;
  background: lightblue;
}

.body {
  flex: 1 1 auto;
}

.footer {
  position: sticky;
  bottom: 0;
  background: lightblue;
}
<main class="container-fluid p-0">
  <main class="row h-100">

    <section class="col-12">

      <div class="header bg-info w-100">
        <h1>Welcome to FMail (flexbox)</h1>
      </div>

      <div class="body bg-dark text-white p-0 w-100">
        <h5>The main email box (should always occupy all space between header and footer)</h5>
        <ul>
          <li>Email 1</li>
          <li>Email 2</li>
          <li>Email 3</li>
          <li>Email 4</li>
          <li>Email 5</li>
          <li>Email 6</li>
          <li>Email 7</li>
          <li>Email 8</li>
          <li>Email 9</li>
          <li>Email 10</li>

          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>

      </div>

      <div class="footer bg-info w-100">
        <h5>I am the footer (should be fixed at bottom)</h5>
      </div>

    </section>

  </main>
</main>

Understanding how bootstrap container-fluid works and how to make a section inside the container fill the entire width

container-fluid takes the full width of the screen while container has fixed size for each resolution. 

.div1 {      background-color:red;    }
    .div2 {      background-color:gray;    }
    .div3 {      background-color:blue;    }
    .row {      height: calc(100vh - 200px);    }
    #main {      background-color: lime;    }
    #main_head {      height: 200px;      color: red;      margin: 0;    }
    #main_foot {      height: 200px;      background-color: pink;      margin: 0;      color: red;     position: absolute;     left: 0;     right: 0;      }
<!DOCTYPE html>    <html>      <html lang="en">    <head>      <meta charset="utf-8">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>        </head>    <body>          <link rel="stylesheet" href="test.css">    <script src="test.js"></script>    <div class="container-fluid" id="main">      <h1 id="main_head">This is a heading</h1>            <div class="row">        <div class="col-sm-2 div1">        </div>        <div class="col-sm-8 div2">        </div>        <div class="col-sm-2 div3">        </div>      </div>            <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>    </div>        </body>    </html>

Bootstrap 4 full screen page with fix footer and nav: content doesn't fill and overflow

  1. Wrap all the content of the body in a container that is flex, and its flex-direction is column.
  2. All the parents of main container need to have 100% height.
  3. Use .flex-grow-1 on the main container so that it takes all the available space.
  4. Hide overflow of the main container
  5. Scroll overflow of the immidiate child of the main container. It must be the parent of all of the main content.

body,
html {
  height: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column h-100">
  <header class="container-fluid">
    <div class="row">
      <div class="col-12 p-5 bg-primary">
      </div>
    </div>
  </header>
  <main class="container-fluid flex-grow-1 overflow-hidden">
    <div class="row h-100 overflow-auto">
      <div class="col bg-danger">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis totam corporis alias qui repellendus optio consectetur nihil suscipit ipsa dolorem in ab, illo, hic placeat iste necessitatibus eum accusamus magni! Perspiciatis, itaque dolore, veritatis
        et sequi obcaecati ipsum fuga deserunt laborum assumenda ducimus facilis pariatur explicabo? Ex veritatis placeat minus enim iure ea deserunt ut optio. Est odio a omnis! Veritatis laborum sit, ea laboriosam nihil laudantium numquam ab modi ipsam
        doloribus obcaecati consectetur nam magnam non sequi illum vero facilis voluptatibus quibusdam unde sunt sapiente! Pariatur adipisci nostrum deserunt! Dolorem assumenda inventore nisi eligendi officia rerum nostrum ea voluptates esse atque deserunt
        culpa ex nobis quod est, fugit molestias recusandae sint iusto ut rem cum itaque dolor magnam. Eligendi! Hic porro incidunt iure culpa necessitatibus repellendus inventore laboriosam expedita neque consectetur. Reprehenderit assumenda minima eum
        laboriosam impedit, omnis esse molestias vero ut? Totam corrupti dolore excepturi fugit dolorum aliquid. Provident blanditiis quasi expedita excepturi ipsa dicta odit, aspernatur ad quisquam illo? Dolores perspiciatis magnam nulla odio rerum tenetur
        inventore fuga. Quo sed eius sapiente, et eligendi blanditiis repellendus saepe! Commodi ipsa explicabo tempore. Dolor voluptas consequuntur amet vero harum nesciunt veritatis placeat? Dolorem ducimus a temporibus perspiciatis cum ipsum tempora
        recusandae unde, repudiandae, nostrum esse magnam velit, consequatur debitis! Quos, ad quaerat optio cumque dolorum facere excepturi eligendi quod rerum suscipit adipisci sapiente animi? Consectetur excepturi tempora nemo libero facere pariatur
        assumenda quisquam porro. In sint voluptas at maxime. Facilis eveniet voluptatem voluptas, libero saepe autem nulla sequi ducimus id quisquam quos aperiam reiciendis ipsa! Nesciunt quae, delectus laboriosam dicta nostrum dolorem inventore rerum
        tempore assumenda animi numquam architecto. Ab ullam amet dolorum impedit debitis id tenetur, nesciunt, exercitationem ut natus a consequuntur harum. Modi illum assumenda earum deserunt voluptatum, non minima hic ad voluptate ullam quae maxime
        expedita? Numquam rem blanditiis, ducimus commodi assumenda corrupti odit mollitia iure inventore molestiae velit quod. Itaque architecto dolores optio voluptatum porro saepe maxime, magnam, perspiciatis amet repellendus fuga eum earum voluptas?
        Quasi sunt, hic consequatur non dolor dolorem, impedit perferendis autem minus labore ea maiores distinctio laudantium eaque quis optio illum voluptatem repudiandae blanditiis magni, repellat et accusamus amet! Aliquid, amet. Deserunt voluptatem
        at excepturi odit maiores quas aut enim consequuntur obcaecati architecto. Fuga nulla maiores vel maxime? Totam a adipisci libero qui, dolore velit rerum optio animi voluptate facilis? Quisquam? Aperiam, quis est pariatur accusantium nulla sed
        minima vel quae facilis, fugiat non qui amet velit quas beatae cupiditate eius sit possimus repellat. Mollitia incidunt magnam et enim, aut doloribus. Dignissimos, a non. Praesentium cupiditate corporis quis harum reprehenderit doloremque fugit
        natus, laudantium rem, facere explicabo aut neque modi? Omnis id minima alias explicabo recusandae ut. Dolorem repellat exercitationem laudantium! Doloremque ea molestias, ratione iure fuga distinctio beatae sit eveniet similique animi excepturi
        non error provident rem amet ullam tempora cum recusandae, eum velit harum? Aut quos hic corporis et. Illum quia dolore, numquam reprehenderit consequuntur officia incidunt ea voluptatum quae, ipsum labore a omnis hic sed necessitatibus impedit.
        Aspernatur quo nam expedita tenetur quibusdam rerum iste ab odio illo. Autem facere fuga aliquam asperiores eius saepe, qui aut amet ratione harum alias tenetur quia, earum expedita voluptate dolor, cumque porro ex nobis eveniet distinctio blanditiis?
        A voluptate eius delectus? Quasi, illum ut quibusdam vitae molestias atque a, modi adipisci similique distinctio cum at animi, aut pariatur consequuntur ad enim dolore? Sit aliquam dignissimos sunt ducimus nihil itaque non reprehenderit? Iure
        error deleniti distinctio esse nam vel nulla aliquid porro consequuntur eius architecto rerum soluta quod ex dolorem at ducimus, quam odio sapiente! Unde dignissimos ratione quas dicta dolorum qui! Error dignissimos eius cupiditate, ipsam labore
        illo. Eos repudiandae, beatae assumenda laboriosam minima veniam dolorum consequatur pariatur neque quidem inventore animi rerum nemo ipsa ut aliquid fuga eaque? Blanditiis, aliquid. Modi placeat nemo quos soluta suscipit? Rem necessitatibus dolorem
        maiores culpa ducimus accusamus cumque sequi qui unde iste aspernatur labore officiis nisi debitis itaque blanditiis tempora, eveniet consectetur! Nesciunt, quam! Obcaecati, quis odit sint beatae reiciendis suscipit labore et eaque pariatur velit,
        ut inventore! Fuga, repudiandae iste, voluptatem corrupti quibusdam error illum quas fugiat asperiores ea omnis ratione qui soluta! Dignissimos ab voluptate accusantium autem facilis architecto, illo sapiente mollitia minima praesentium recusandae
        enim officia officiis unde tempore neque repudiandae perferendis tenetur suscipit eos commodi quis dolorum! Explicabo, odio beatae? Doloribus dolore asperiores eveniet, facere corporis magni aliquid, ratione ipsa minima consequuntur, quos nam
        enim officiis repudiandae voluptatem. Animi assumenda, deserunt placeat labore iusto eos quisquam officiis architecto nobis explicabo. Repudiandae minima facere laboriosam itaque inventore unde non optio praesentium eligendi voluptates culpa et
        corrupti aperiam tenetur incidunt reprehenderit dolorem sit quisquam, sed asperiores veritatis nam vel ipsum dicta! Non. Provident saepe ullam minus laboriosam sit nam rerum! In quidem minima reiciendis, non amet vero sed unde deleniti veritatis
        mollitia voluptatem. Excepturi maiores error consequatur dolore labore reiciendis libero quisquam? Accusantium earum suscipit atque architecto dolorum itaque aliquid error asperiores neque ad rem perferendis expedita a voluptate, similique id
        vero? Quidem iusto expedita ab, consectetur magni similique suscipit aperiam non. Veritatis debitis rem hic, at in deleniti dolorem architecto velit illo repudiandae, eligendi a. Obcaecati ducimus voluptate placeat nulla facere odio, id aut illo
        numquam nobis expedita dolor non ab. Perferendis beatae placeat soluta, repellat dignissimos id qui impedit explicabo? Magni, fugit? Vel, reprehenderit eius dolorem quasi consequuntur vero dolorum molestias ipsum illo enim, quod neque est vitae
        ratione laboriosam?
      </div>
    </div>
  </main>
  <footer class="container-fluid">
    <div class="row">
      <div class="col bg-info p-5"></div>
    </div>
  </footer>
</div>

Related Topics

How to Create a Frosted Glass Effect Using CSS

HTML + CSS: Numbered List with Numbers Inside of Circles

Allow Access-Control-Allow-Origin Header Using HTML5 Fetch API

Select Label Using CSS Selector

Make Input Type="Password" Use Number Pad on Mobile Devices

Prevent a Child Element from Overflowing Its Parent in Flexbox

R Markdown HTML Number Figures

Overflow Behavior After Using CSS3 Transform

Meta Viewport Just on Portrait

How to Tell Browsers to Honor The Jpeg Exif Orientation

Hiding The Toolbars Surrounding an Embedded Pdf

Make Anchor Links Refer to The Current Page When Using <Base>

How to Prevent Background Scrolling When Bootstrap 3 Modal Open on Mobile Browsers

CSS Prevent Div Flex from Stretching Child

<Button Type="Submit"> Compatibility

How to Get The HTML Source of a Webpage in Ruby

HTML5 Input Box with Type="Number" Does Not Accept Comma in Chrome Browser

Which Dom Elements Can Be Child of Tr


Leave a reply



Submit