Bootstrap 3 two columns full height

I'm trying to make a two-column full-height layout with Twitter Bootstrap 3. It seems that Twitter Bootstrap 3 does not support full height layouts. What I want to do:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

If the content grows, the nav should also grow.

• Height 100% for every parent doesn't work because there is the case where content is one line.
• position: absolute seems to be the wrong way.
• display: table and display: table-cell solves the problem, but not elegantly.

HTML:

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

Is there way to make it with default Twitter Bootstrap 3 classes?

Solution 1:

Edit: In Bootstrap 4, native classes can produce full-height columns (DEMO) because they changed their grid system to flexbox. (Read on for Bootstrap 3)

Bootply demo / Codepen

Markup:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Relevant) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9)

NB:

1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).

2) If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen demo

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

Codepen demo

Solution 2:

You can achieve what you want with the padding-bottom: 100%; margin-bottom: -100%; trick, has you can see in this fiddle.

I change your HTML a little bit, but you can achieve the same result with your own HTML with the following code

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

Solution 3:

Pure CSS solution

Working Fiddle

Using CSS2.1 only, Work with all browsers (IE8+), without specifying any height or width.

That means that if your header suddenly grows longer, or your left navigation needs to enlarge, you don't have to fix anything in your CSS.

Totally responsive, simple & clear and very easy to manage.

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

Explanation: The container div takes 100% height of the body, and he's divided into 2 sections. The header section will span to its needed height, and the HeightTaker will take the rest. How is it achieved? by floating an empty element along side the container with 100% height (using :before), and giving the HeightTaker an empty element at the end with the clear rule (using :after). that element cant be in the same line with the floated element, so he's pushed till the end. which is exactly the 100% of the document.

With that we make the HeightTaker span the rest of the container height, without stating any specific height/ margin.

inside that HeightTaker we build a normal floated layout (to achieve the column like display) with a minor change.. we have a Wrapper element, that is needed for the 100% height to work.

Update

Here's the Demo with Bootstrap classes. (I just added one div to your layout)