HTML Layout - Keep wrapper height 100% even with no content - html

Question

I'm having a small issue with my html layout .
When i have content - it works properly :
http://jsfiddle.net/exqofLft/
but when i have no content . the "wrap" height becomes 0 and the header and footer comes together.
e.g : http://jsfiddle.net/aqgo9370/
When there is no content or little content . i want the header at the top , followed by the full size wrap and the footer at the bottom of the page.
Any ideas how to do this ?
e.g :
CSS :
html, body
{
height:auto;
background-color:grey;
position:relative;
margin:0;
}
#header
{
position:absolute;
width:auto;
min-width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:auto;
min-width:100%;
height:auto;
background-color:blue;
margin:75px 0 0 0;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
}

Answer 1

By using vw/vh we can size elements to be relative to the size of the viewport. Add the below code in this id #wrap{}, Demo
min-height: 100vh;

Answer 2

You could use jquery for this.
var headerH = $('#header').height();
var footerH = $('footer').height();
var windowH = $(window).height();
$('#wrap').css({
'minHeight': (windowH - (headerH + footerH)) + 'px'
});
I made some changes in your html/css though.
Check the fiddle:
http://jsfiddle.net/skeurentjes/aqgo9370/9/

Answer 3

You can use box-sizing:border-box , and give it a padding to bottom , and top corresponding to footer and header respectively :
#header
{
top:0px;
position:relative;
width:100%;
height:75px;
background-color:yellow;
}
#wrap
{
position:relative;
width:100%;
height:100%;
background-color:blue;
box-sizing: border-box;
padding-top: 75px;
padding-bottom:50px;
}
footer
{
position:absolute;
width:auto;
min-width:100%;
height:50px;
background-color:black;
bottom:0px;
}
Example

Answer 4

Js and position is not needed to Do this. Try this, This is Technically called Sticky footer
html, body {
height:100%;
background-color:grey;
margin:0;
}
#content {
float: left;
width: 100%;
min-height: 100%;
padding-bottom: 50px;;/*height of your footer*/
box-sizing: border-box;
}
#header {
width:100%;
height:75px;
background-color:yellow;
}
#wrap {
width:100%;
height:auto;
background-color:blue;
}
footer {
float: left;
width:100%;
height:50px;
background-color:black;
margin-top: -50px;/*height of your footer*/
}
<div id="content">
<div id ="header"></div>
<div id = "wrap"></div>
</div>
<footer></footer>

Answer 5

Use padding-bottom with desired height like
#wrap
{
padding-bottom:100%;/*or 50% or px value like 50px*/
}
html,
body {
height: auto;
background-color: grey;
position: relative;
margin: 0;
}
#header {
position: absolute;
width: auto;
min-width: 100%;
height: 75px;
background-color: yellow;
}
#wrap {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background-color: blue;
margin: 75px 0 0 0;
padding-bottom: 100%;
}
footer {
position: absolute;
width: auto;
min-width: 100%;
height: 50px;
background-color: black;
}
<div id="header">
<div>
<div id="wrap"></div>
<footer></footer>

Answer 6

It's working as it should. Elements always collapse to zero with no content. In order to achieve any height without content, you must assign a height value.

Answer 7

add Minimum height of wrap id
for example :
min-height:500px;