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)
The native Bootstrap 3.0 classes don’t support the layout that you describe, however, we can integrate some custom CSS which make use of css tables to achieve this.
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.