Content box should extend to footer even if empty - html

Question

I need the content box to reach to the footer even when the content box is empty. I want to achieve this using only CSS.
padding-bottom is not an option.
I don't want to use a background image, such as background-image: url center repeat-y;
How can I achieve this?
.wrap {
height: 100%;
}
.l-col {
padding-top: 0;
height: 100%;
}
.footer {
position: relative;
height: 60px;
clear: both;
float: left;
width: 100%;
z-index: 3;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap">
<div class="container">
<div class="col-xs-12 l-col">
<div class="col-xs-12" style="padding:0px">
<table>Content</table>
</div>
</div>
</div>
</div>
Current Layout:
Desired Layout:

Answer 1

Using CSS's calc() function, you can use calculate the min-height of your content div.
body {
margin: 0
}
.header,
.footer {
width: 100%;
height: 60px;
background-color: grey;
}
.content {
width: 100%;
min-height: calc(100vh - 120px);
background-color: #FFF8DC;
}
<div class="wrap">
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</div>
If your preferred method is jQuery, the following code will work, even on page resize.
function setContentHeight() {
var headerHeight = $(".header").height();
var footerHeight = $(".footer").height();
var winHeight = $(window).height();
$(".content").css("min-height", winHeight-(headerHeight+footerHeight));
}
setContentHeight();
$(window).resize(setContentHeight);

Answer 2

Here you go just calculate your min height so if content gets more it will expand if you don't want that just use regular height.
body{margin:0;}
.head, .foot {
width: 100%;
background: gray;
height: 50px;
float: left;
display: inline-block;
}
.content {
width: 80%;
min-height: calc(100vh - 100px);
background: lightgray;
float: left;
display: inline-block;
}
<div class="head">Head</div>
<div class="content">hello</div>
<div class="foot">foot</div>

Answer 3

flex + html5, looks like a school case ...
html {
display:flex;
height:100%;
}
body {
flex:1;
display:flex;
flex-flow:column;
color:white;
}
header , footer{
text-align:center;
background:#4F81BD;
line-height:4em;
}
main {
flex:1;
display:flex;
justify-content:center;
padding-left:10%;/* cause aside is set to 10% width */
}
section {
border:30px #4F81BD solid;
padding:1em;
margin:2px;
box-shadow:0 0 0 2px , inset 0 0 0 2px ;
width:60%;/* whatever */
color: #385D8A
}
aside {
background: #4F81BD ;
box-shadow:0 0 0 2px #385D8A;
margin:auto 0;
width:10%;
min-height:30vh;/* demo purpose, use content instead */
display:flex;/* optionnal to center on XY axis */
align-items:center;
justify-content:center;
}
<header>
header (any height)
</header>
<main><!-- fill gap in between -->
<section>section, run snippet in full page mode and resize window</section>
<aside>aside</aside>
</main>
<footer>
footer (any height)
</footer>
pen to play with: http://codepen.io/gc-nomade/pen/ORyXZA