CODEWITHSUNDEEP
htmlcss
David
David

Reputation: 16028

Height : 100% on a scrollable page

I'm creating a blog page, and I need a DIV to take 100% of all the available width and height. enter image description here

When I try using Height : 100%, the DIV only takes what is the visible area. So, if the screen resolution is 1920x1080, and the website is 900x16000 large.... Height:100% gives 1080 only. I've seen a lot of answers here before posting this but haven't managed to get it to work.

CSS:

#parent
{
    position : absolute;
    background: green;        
    height : 100%;
    width : 100%;
}
.child
{
   position: relative;
    float:left;
   background: red;
   height : 400px;
   width : 500px;
   border : 1px solid yellow;
   margin: 10px 10px 10px 10px;
}

HTML:

<div id="parent">
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
</div>
​

Take a look at this JSFiddle : http://jsfiddle.net/acJVw/21/ What I need is that the green area takes ALL the available space, till the very bottom of the (scrollable) page. ​ Edit:

EDIT: I have to change the question a bit because the answers are working with the examples I provided, but not with a gradient background. Here's a new JSFiddle with a gradient and min-height: http://jsfiddle.net/acJVw/27/

The gradient does not make it all the way to the bottom of the page but just stops!

Upvotes: 1

Views: 174

Answers (2)

syed mohsin
syed mohsin

Reputation: 2938

use min-height instead of height. So that it take the space of the content even it is larger than visible screen. Take a look at this fiddle

<div id="parent">
<div class="child"> Some text </div>
<div class="child"> Some text </div>
<div class="child"> Some text </div>
<div class="child"> Some text </div>
</div>

​ and css

 #parent
{
position : absolute;
background: green;        
min-height : 100%;
width : 100%;
}
.child
{
position: relative;
float:left;
background: red;
height : 100px;
width : 500px;
border : 1px solid yellow;
margin: 10px 10px 10px 10px;
}

​ Edit: if your content is greater than your screen width then you can also try

min-width:100%;

After Question Edit Your gradient is stopping because you didn't use min-height:100% in your fiddle Try this fiddle

Upvotes: 2

Blazer
Blazer

Reputation: 14277

Try;

On my screen it takes 100%?

   <style>
* {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#parent
{
    position : absolute;
    background: green;        
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;

}
.child
{
   position: relative;
   float:left;
   background: red;
   height : 100px;
   width : 500px;
   border : 1px solid yellow;
   margin: 10px 10px 10px 10px;
}
​
</style>

<div id="parent">
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
    <div class="child"> Some text </div>
</div>

Upvotes: 1

Related Questions