Full height class doesn't make div the full height

Question

This is my code: http://jsfiddle.net/spadez/LQKfk/2/

HTML:

<div id="main">
    <div id="header" class="fullheight">
        <div id="nav">Test</div>
        Nav
    </div>
    <div id="content">
Hello           
    </div>
</div>

CSS:

*{padding: 0px; margin: 0px;}
#main{
background-color: #3B2F63;
background-image: -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
background-repeat: no-repeat;
background-size: 100% 1000px;
color: #c7c0de;
margin: 0;
padding: 0;
}

#header { }
#content{background-color: white;}

.fullheight{
display: block;
position: relative;
height: 100%;
}

With this code, why isn't the gradient area extending the full height of the window?

Answer 1

You need to give the gradient area a height of 100%, which in turn needs to be relative to the viewport which can be established by setting the same for the html and body elements.

Demo Fiddle

Add:

html,body, #main{
    height:100%;
}

Answer 2

The full height is basically related to document first. You need to make document full height of window at least to have your divs in document get full height of window.

Achieving this might be tricky in case of your document is probably containing more content than is fitting in current size of window , though.

Take the fiddle of SW4 and change

 height: 100%;

on html, body to

 min-height: 100%;

See this derived fiddle: http://jsfiddle.net/SGjcc/1/

Answer 3

html,body, #id_of_div_you_want_to_make_full_heightwidth_of_window{
    height:100%;
    width:100%;
}

Answer 4

html,body, #main
{
    height:100%;
}

Answer 5

You can try below code:

Demo

#main{
  background-color: #3B2F63;
  background-image: -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
  background-repeat: no-repeat;
  background-size: 100% 1000px;
  color: #c7c0de;
  margin: 0;
  padding: 0;
  height:100%;
}