<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 id="wrap" class="container"> <!-- Fixed navbar --> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> <!--/.nav-collapse --> </div> </div> <!-- Begin page content --> <div class="center-container"> <div class="center-row size-min"> <div class="col-xs-6">1</div> <div class="col-xs-6">2</div> </div> <div class="center-row size-max"> <div class="col-xs-6">3</div> <div class="col-xs-6">4</div> </div> <div class="center-row size-min"> <div class="col-xs-6">5</div> <div class="col-xs-6">6</div> </div> </div> </div> <div id="footer"> <div class="container"> <p> </p> <p class="lead">This Bootstrap layout was made @<a href="">Bootply.com</a></p> </div> </div>

html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } img { width: 100%; } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: 100%; width: 100%; /* Negative indent footer by its height */ margin: 0 auto -82px 0; /* Pad bottom by footer height */ padding: 0 0 80px 0; } /* Set the fixed height of the footer here */ #footer { height: 80px; background-color: #f5f5f5; } #wrap > .center-container { padding: 50px 0 0 0; margin: 0; } #footer > .container { padding-top: 5px padding-left: 15px; padding-right: 15px; } .center-container { height: 100%; display: table; width: 100%; margin: 0; } .center-row { width: 100%; display: table-row; } .size-min { height: 10%; } .size-max { height: 30%; } .size-max > div { overflow-y: scroll; } .center-row > div { height: 100%; width: 50%; display: table-cell; border: 1px solid #eee }

$(document).ready(function() { });