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?

19 Answers
19

Leave a Reply

Your email address will not be published. Required fields are marked *