Question

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

Answer 1

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 :).