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.
Resize body according to screen resolution using HTML5 and CSS3
4.3k views Asked by Claus Løppenthien At
2
In xhtml http://jsfiddle.net/DWMHr/