Resize body according to screen resolution using HTML5 and CSS3

Question

I’m trying to do the following. Create a website with a static top (Header) and article area in the middle and a sticky footer with the navigation controls. My challenge is the following. I want the controls to at the bottom of the page at all time, so in case one rescale the browser / open the page at different resoullution it is only the article area that is resized …. I have not been able to solve this / or seen a page that is doing this.

I want a static header of 100px, a static footer of 150px and an article area of window.innerHeight – footer – header

I have seen a lot of page with static footers, but all for all of them you have to browse to the bottom of the screen for it so be seen. I want mine to shown in the bottom of the screen at all times.

Any help will be much appreciated.

Answer 1

#header{
background:yellow;
position:absolute;
top:0;
left:0;
height:100px;
width:100%;    
}

#foot{
background:yellow;
position:absolute;
bottom:0;
left:0;
height:150px;  
width:100%;        
}

#content{
background:orange;
position:absolute;
top:100px;
bottom:150px;
width:100%;    
}

In xhtml http://jsfiddle.net/DWMHr/

Answer 2

I think your best option might be to make the article area overflow:scroll