<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 ----------> <header> <h1>Logo</h1> </header> <div class="container-full special"> <div class="jumbotron"> <div class="row"> <div class="col-xs-12 col-md-6 no-padding colunas"> <div class="img"></div> </div> <div class="col-xs-12 col-md-6 no-padding colunas"> <div class="black"> <h2>Text</h2> </div> </div> </div> </div> <div class="jumbotron"> <div class="col-md-6 f50">aaa</div> <div class="col-md-6 f50">aaa</div> <div class="col-md-6 f50">aaa</div> <div class="col-md-6 f50">aaa</div> </div> <hr> <div class="jumbotron">Three</div> </div>

html,body { height:100%; } header{ background:coral; height: 50px; position: fixed; width: 100%; z-index: 1; } header h1{ margin:0; } .special, .special .jumbotron, .special .jumbotron .row { height:100%; padding: 0; margin:0; } .colunas, .img, .black{ height:100%; } .f50{ height: 50%; background: red; border: 1px solid black; } .colunas.no-padding{ padding: 0; } .colunas .img{ background:url(https://s-media-cache-ak0.pinimg.com/736x/af/d6/eb/afd6ebd300bece0d713a68fc7fa945df.jpg); background-size: cover; border: 1px solid red; } .colunas .black{ background: black; border: 1px solid red; } .colunas .black h2{ margin: 0; }

//$('.img,.black').height($(window).height());