HTML
<html>
<head>
<meta name="description" content="CDN Bootstrap">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="top">
<div class="copy">Sample Text</div>
</div>
<div class="big-box">
<div class="child">
<div class="content">
<div class="col-md-12"> <h1>Calculate Height with CSS, and Vertically Centered Text within Bootstrap</h1></div>
<div class="col-md-12"><strong>Details:</strong> This is showing off vertically centered text, and showing how we can use calc to have a div be 100vh minus the height of the header. I also used some bootstrap for good measure.</div>
<div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam a ante ultricies bibendum. Etiam sagittis justo vel consectetur lobortis. Aenean tempor massa a nunc viverra, et facilisis odio tempor. Nam molestie ultricies nulla sit amet mattis. Praesent porttitor dui est, sit amet auctor risus dictum vel. Suspendisse et blandit justo. Cras tincidunt in nisl id porttitor.
</div>
<div class="col-md-6">
Nam mi felis, finibus eu augue nec, interdum auctor ante. Donec eget bibendum leo. Ut et pulvinar ex, ultrices pharetra sapien. Nunc ullamcorper nunc id odio euismod vulputate. Nunc congue, augue id tincidunt consequat, nisi felis ultrices nisi, eu posuere nibh tellus nec metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet feugiat sodales. Etiam vel sapien odio. Quisque id felis orci. Aenean varius enim vel orci fringilla molestie. Etiam metus purus, imperdiet a ligula non, sagittis tempor nibh. Vestibulum ultricies enim eget mi malesuada, a hendrerit nulla finibus. Quisque eget massa ac sapien sodales aliquam. Cras dolor neque, tristique ut semper et, ullamcorper at diam. Maecenas vulputate eu elit quis imperdiet.
</div>
<div class="col-md-6">
Nullam tristique enim a diam venenatis, ut pulvinar ex interdum. Vestibulum est massa, facilisis in sem sit amet, rutrum imperdiet sapien. Aenean semper leo nec elit commodo ullamcorper. Aliquam sed arcu nibh. Pellentesque quis mauris a nisl malesuada ornare quis ultrices risus. Sed nunc sapien, ornare quis pharetra sed, dictum nec ex. Aenean quam turpis, suscipit a facilisis et, commodo ut nisl. Etiam sagittis euismod convallis. Ut vitae felis ut ipsum pulvinar dignissim.
</div>
</div>
</div>
</div>
</html>
CSS
.top{
display:block;
position:relative;
width:100%;
height:60px;
background-color:#336699;
color: #fff;
text-align:center;
overflow:hidden;
margin:0px;
padding:0px;
}
.top .copy{
padding-top:20px;
}
.big-box{
height: calc(100vh - 60px);
width:100%;
background-color: #ccc;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
.content{
position:relative;
display:block;
max-width: 960px;
width:90%;
margin: 0 auto;
}
.content h1{
text-align: center;
}
.content div{
margin-bottom:10px;
}
