CODEWITHSUNDEEP
htmlcss
Muhammad Usman
Muhammad Usman

Reputation: 10936

How to keep the top div height fixed and bottom div height in %age

I have created two divs in a page one is header and other is the content 

   <div id="main"> 
    <div id="header">
    </div>
    <div id="content"> 
    </div>
   </div>

And the style is 

<style>
#main{
height:100%;
}
#header{
height:100px
}

#content{
height:???? // to fit the content 100% on any kind of screen 
}
</style>

I want to adjust the content according to the screen. screen height can be 100px and it might be 2000px. How I can do it with css. I do not want white space at the bottom or to scroll the page

Upvotes: 1

Views: 888

Answers (5)

Sowmya
Sowmya

Reputation: 26969

Add html, body { height: 100%; } and use position:absolute

Let both the inner div has position:absolute and it should starts from the top of the browser. Use z-index to switch the divs.

HTML 

<div id="main"> 
    <div id="header">c
    </div>
    <div id="content">
       <div class="hidden">This div helps to push the content 100px below</div>
        cxbvbvbvcbv
    </div>
   </div>​

CSS

html, body {  height: 100%;   }
#main{height:100%; position:relative}
#header{height:100px; background:green; position:absolute; top:0; left:0; width:100%; z-index:1000}
#content{height:100%; background:grey; position:absolute; top:0; left:0; width:100%; z-index:1; }​

DEMO Updated

Upvotes: 0

Sathya
Sathya

Reputation: 5308

If you want this layout using css, you have to look these.

display: box;

OR

height: calc(100% - 100px);

But these are not supported in old browsers. display: box will not work in ie9.

so do some javascript.

document.getElementById('content').style.height = (document.getElementById('main').clientHeight - 100) + "px";

call this in body's onload event.

Upvotes: 1

NewUser
NewUser

Reputation: 13333

In css try this

html, body {  height: 100%;   }
#main{height:100%; overflow:hidden}
#header{height:100px; background:green; }
#content{height:100%; background:#F00; overflow:auto; }​

Here is the fiddle link

Upvotes: 0

Vivek Dragon
Vivek Dragon

Reputation: 2248

Add these lines

             html,body{height:100%;}.

             #main{height:100%; }
             #header{height:100px; background:#ccc; }
             #content{min-height:90%; background:#666; }​

This will make you to adjust in the screens

Upvotes: 1

Levi Botelho
Levi Botelho

Reputation: 25214

If you are fine using CSS3, this code:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main{
    height:100%;
    background-color: blue;
}

#header{
    height: 10%;
    background-color: green;
}

#content{
    height: -webkit-calc(100% - 105px);
    background-color: red;
}

Will do the trick in chrome. You will have to test the alternatives for the calc property for the other browsers. You will have to play with the margin and padding of the parent elements to get exactly your desired effect, but this is the idea.

If CSS3 is not an option, then you are going to have to define your header in percent unless somebody smarter than me can give you a better alternative :).

Upvotes: 2

Related Questions