div height 100% with header and footer - no tricks - html

Question

I am trying to create a layout where I have a header (nav) of fixed height in px, a footer of fixed px as well and a div in between them that occupies the remaining space.
Broken Demo: http://jsfiddle.net/murid/0vcyqm3y/
What I'm trying to achieve is for that blue div to go all the way down to the footer. Keeping in mind that I'm using a "push" div to get the footer to sit at the bottom of the page in case the content of the page is short and that said content can be very long as well therefore pushing the footer down.
I've checked out similar questions on Stackoverflow but answers involve position absolute, JavaScript, or background color on the body, I'm trying to avoid all of these and have a simple CSS only solution with background color on the content div.
I'm using Bootstrap btw.
CSS and HTML:
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -50px;
}
nav.navbar {
margin-bottom: 0;
}
section {
padding: 10px 0;
margin-left: -15px;
margin-right: -15px;
}
.section-primary {
background: #337ab7;
}
section > .row {
margin-left: 0;
margin-right: 0;
}
footer,
.push {
height: 50px;
}
<div id="wrap">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Logo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<section class="section-md section-primary">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
Panel Body
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="push"></div>
</div>
<footer>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Copyright</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
</footer>

Answer 1

I have to say I'm not a fan of this.. but this is the only CSS solution I know..
http://codepen.io/pacMakaveli/pen/EjWXNw?editors=110
Otherwise, for a cleaner way, use flexbox.
html,
body {
height: 100%;
}
#wrap {
height: 100%;
display: table;
width: 100%;
border: 2px solid green;
}
#wrap > nav,
footer {
display: table-row;
}
nav.navbar {
margin-bottom: 0;
}
section {
padding: 10px 0;
margin-left: -15px;
margin-right: -15px;
}
.section-primary {
background: #337ab7;
}
.content {
border: 3px solid red;
display: table-cell;
height: 100%;
}
section > .row {
margin-left: 0;
margin-right: 0;
}
<div id="wrap">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Logo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<section class="section-md section-primary">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
Panel Body
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<footer>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Copyright</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Logout
</li>
</ul>
</div>
</div>
</nav>
</footer>
</div>