Bootstrap two column 100% height

Question

I want to create a two-column (sidebar, main content) layout with bootstrap. After a lot of wiggling and googling, I realized I can do it by applying:

 html, body {
    height: 100%;
}
.container-fluid{
    min-height: 100%;
    overflow: hidden;
}

.sidebar, .content{
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

to my html structure:

<div class="container-fluid">
    <div class="row">
        <!-- sidebar -->
        <div class="sidebar col-md-3"><p>Box 1</p></div>
        <!-- /sidebar -->
        <!-- main -->
        <div class="content col-md-9"><p>Box 2</p></div>
        <!-- /main -->
    </div>
</div>

My question is: why does this work? It works, but what's the reasoning?

Answer 1

The code you posted is creating the illusion of 100% height by expanding the divs with padding. Change those two numbers (and add some content as well) and you'll understand whats going on.

And depending on the type of content you plan on putting in the sidebar, it may or may not be beneficial to use columns since they expand and contract with the viewport and will stack on top (or under) of your main content or be squeezed far to small to use. See example.

body,
html {
  position: relative;
  margin-top: 25px;
}
.sidebar-fixed {
  padding: 5px 18px;
  position: fixed;
  width: 200px;
  height: 100%;
  top: 0;
  left: 0;
  background: #f5f5f5;
}
ul.sidebar-list {
  list-style: none;
  display: inline;
  text-align: left;
}
ul.sidebar-list > li {
  font-size: 18px;
  padding-bottom: 25px;
}
ul.sidebar-list > li > a {
  color: #555;
  text-decoration: none;
}
.main-content {
  margin-left: 200px;
}
@media (max-width: 768px) {
  .sidebar-fixed {
    width: 100px;
  }
  .main-content {
    margin-left: 100px;
    padding: 0;
  }
  ul.sidebar-list > li {
    font-size: 14px;
    padding-bottom: 25px;
  }
}
@media (max-width: 360px) {
  .sidebar-fixed {
    display: none;
  }
  .main-content {
    margin-left: auto;
    padding: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="sidebar-fixed">
    <ul class="sidebar-list">
      <li> <a href="#"> About</a> 
      </li>
      <li> <a href="#"> Contact</a> 
      </li>
      <li> <a href="#"> Products</a> 
      </li>
      <li> <a href="#"> Blog</a> 
      </li>
    </ul>
  </div>
  <div class="main-content">
    <div class="container-fluid">
      <div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
      </div>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux
        de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce
        à la vente de feuilles Letraset contenant des passages du Lorem Ipbody { position: relative; margin-top: 125px; margin-bottom: 50px; } .navbar.navbar-custom { border-radius: 0px; border: none; background: #337ab7; border-bottom: 1px solid #ff0;
        } .navbar-custom .upper-nav { font-size: 20px; padding: 9px 20px; height: 50px; color: #337ab7; background-color: #fff; } .navbar-custom .upper-nav img { margin-top: 0px; } .navbar-custom .navbar-nav { margin-right: 30px; } .navbar-custom .nav-buttons
        { border-radius: 0px; background: none; border: none; color: #337ab7; } .navbar.navbar-custom .btn-group .dropdown-menu > li > a { color: #fff; } .navbar.navbar-custom .btn-group .dropdown-menu > li > a:hover { color: #444; } .navbar.navbar-custom
        .navbar-nav > li > a { color: #fff; border: none; } .navbar.navbar-custom .navbar-brand { color: #fff; } .navbar.navbar-custom .dropdown-menu { background: #266080; } .navbar-custom .navbar-nav .open .dropdown-menu > li > a, .navbar-custom .navbar-nav
        .open .dropdown-menu { color: #fff; border: none; } .navbar-custom .navbar-nav .open .dropdown-menu > li >a:hover, .navbar-custom .navbar-nav .open .dropdown-menu:hover { color: #fff; border: none; } .navbar.navbar-custom .navbar-toggle, .navbar.navbar-custom
        .navbar-toggle:focus, .navbar.navbar-custom .navbar-toggle:hover { background: none; outline: none; box-shadow: none; border: none; color: #fff; } .sidebar-fixed { margin-top: 100px; padding: 5px 18px; position: fixed; width: 200px; height: 100%;
        top: 0; left: 0; background: #337ab7; border-right: 1px solid #ff0; z-index: 1500; } ul.sidebar-list { list-style: none; display: inline; text-align: left; } ul.sidebar-list > li { font-size: 18px; padding-bottom: 25px; } ul.sidebar-list > li
        > a { color: #fff; text-decoration: none; } .well { background-color: transparent; border: 3px solid #428bca; border-radius: 0px; text-align: center; font-size: 25px; } .main-content { margin-left: 200px; } .footer { vertical-align: center; position:
        fixed; bottom: 0; width: 100%; height: 50px; background-color: #337ab7; padding: 12px 0; z-index: 3100; } ul.footer-nav > li { margin-top: 5px; list-style: none; vertical-align: center; text-align: right; } ul.footer-nav > li > a { text-decoration:
        none; color: #fff; } @media (max-width: 768px) { .navbar-custom .navbar-nav { margin-right: 0; } .navbar-custom .navbar-nav > li > a { color: #fff; } .sidebar-fixed { margin-top: 104px; width: 100px; } .main-content { margin-left: 100px; padding:
        0; } ul.sidebar-list > li { font-size: 14px; padding-bottom: 25px; } .navbar-custom .navbar-collapse { margin-left: 100px; border: none; } } @media (max-width: 360px) { .sidebar-fixed { display: none; } .main-content { margin-left: 0; padding:
        0; } }sum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum
        est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi
        adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des
        applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux
        de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce
        à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition
        et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a
        pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum,
        et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</p>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux
        de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce
        à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition
        et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a
        pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum,
        et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I End</p>
    </div>
  </div>
</div>

Answer 2

.sidebar, .content{
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

why does this work? It works, but what's the reasoning?

It's sort of a trick. Stylings like background-color will be applied within the padding, but not the margin. So all this is doing is pushing the margin way out and filling in that gap with padding so that background-color goes all the way to the bottom of the screen (or containing div or whatever).

Also notice how important:

.container-fluid{
    overflow: hidden;
}

is. Remove that line and you'll see that all that's happening is you're making a super tall div element and hiding most of it with overflow: hidden in the parent div.

Here's a fiddle you can play with. Note that this trick won't work if the height of the div gets to be too tall.

Answer 3

you can try this one:

html, body {
    height: 100%;
}
.container-fluid{
    min-height: 100%;
    overflow: hidden;
}

.sidebar, .content{
   background-color: red;
    float: none;
    display: table-cell;
    border: 1px solid;
}

You add this css:

.sidebar, .content{
       background-color: red;
        float: none;
        display: table-cell;
        border: 1px solid;
    }

DEMO