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
anddisplay: 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?