CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

Full height class doesn't make div the full height

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?

Upvotes: 2

Views: 100

Answers (5)

Thomas Urban
Thomas Urban

Reputation: 5061

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/

Upvotes: 1

Tuhin
Tuhin

Reputation: 3373

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

Upvotes: 1

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

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%;
}

Upvotes: 0

SW4
SW4

Reputation: 71150

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%;
}

Upvotes: 3

Leo T Abraham
Leo T Abraham

Reputation: 2437

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

Upvotes: 0

Related Questions