<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 ----------> <!-- Wrap all page content here --> <div id="wrap"> <!-- 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="#">Brand</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"> <div class="container"> <h1>100% Height Template from http://www.bootply.com/97103</h1> </div> </div> </div> </div> <div id=""> <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. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: 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%; } .center-row { height:100%; background-image:url('http://www.bootply.com/assets/example/bg_cloud.jpg'); background-size:cover; color:#fff; }