Set the height of a master page to cover all resolutions

Question

I'm trying to set the height of a master page for any screen resolution.

I want to only fill the whole body area of the screen with the content page. Hardcoding the height is not a good way because:

Content pages vary in height
There is a footer at the bottom of the master page

You want to make a website with a content div and a footer? So you want the footer to always be on bottom and the content div to have variable height so it always covers 100% of the screen? Or you only need the footer to be in the bottom and the content can be longer? — Yisela, Nov 08 '11 at 18:18

score 1 · Accepted Answer · edited May 23 '17 at 11:55

If what you need is a footer with fixed height to always stay at the bottom, and a contents div with variable height (so you can add as many content in there as you want), then you should check this fiddle: http://jsfiddle.net/Spycho/YrRgL/2/ from this question: Variable content div height using css with fixed header and footer (first answer, in the edited area).

Something like:

body{
    padding: 0;
}

#content{
    position: absolute;
    width: 100%;
    bottom: 100px;
}

#footer{
    position: absolute;
    height: 100px;
    width: 100%;
    bottom:0;
}

Set the height of a master page to cover all resolutions

1 Answers1