<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>

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*/ -moz-box-sizing: border-box; box-sizing: border-box; } header { background: green; height: 50px; } .row { height: 100%; display: table-row; } @media (min-width: 992px) { .row .no-float { display: table-cell; float: none; } } .col-md-3 { background: pink; } .col-md-9 { background: yellow; }