Sticky footer that shows only below the window - html

Question

I am using display: table property to achieve sticky footer with the following features:
Header and footer heights are not fixed
Content is always 100% of the remaining height
Here is a fiddle of what I currently have: JSFiddle
Everything works perfectly, but what I am trying to achieve is a footer that is not visible on the screen, unless the user scrolls. The footer should be right below the window if there is not enough content, otherwise the content should push it. Here is a picture that explains what I actually mean. In the left is what I currently have, in the right what I am trying to achieve.

Answer 1

You could use flexboxes, along with view height for that !
.container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: stretch;
height: 100vh;
}
.header {
flex: 0 0 50px;
background: lightblue;
}
.content {
flex: 1 1 auto;
background: lightgrey;
}
.footer {
height: 100px;
background: darkcyan;
}
<div class="container">
<div class="header"></div>
<div class="content"></div>
</div>
<div class="footer"></div>

Answer 2

#trichetriche's answer is better than mine (I really need to get to grips with flexbox!), but I updated your fiddle with a little bit of jQuery. This could be distilled down more but you can see what's going on as it is.
All it does is get the header height and content height, and if they're smaller than the window height then it sets the content height accordingly.
Fiddle
$(document).ready(function() {
var h = $('#header').height();
var c = $('#content').height();
var w = $(window).height();
if((h + c) < w) {
$('#content').height(w - h);
}
});

Answer 3

I ended up using just the same code, but instead of having all elements in the container I left the footer outside. Seems to work just right. Here is an updated fiddle: JSFiddle
* {
margin: 0;
padding: 0;
}
body, html{
width: 100%;
height: 100%;
}
.container{
width: inherit;
height: inherit;
display: table;
background: red;
}
.container div {
width: inherit;
}
.header {
background: darkgray;
}
.content {
height: 100%;
background: green;
}
.footer {
background: yellow;
}
<div class="container">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<h1>CONTENT</h1><h1>CONTENT</h1><h1>CONTENT</h1>
</div>
</div>
<div class="footer">
<h1>FOOTER</h1>
</div>