Home/ Questions/Q 6372435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:14:17+00:00

I’m trying to make a page where I have a fixed height header and

  • 0

I’m trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn’t work at all in IE (surprise, surprise).

Example: http://jsfiddle.net/VrfAU/4/

Edit: I’ve made some images to try and make this more clear.

Small content

The content box is centered horizontally and vertically.

Large Content

The content box is longer than the gap between the header and footer, so it stretches the page, keeping the footer at the bottom.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).

    http://jsfiddle.net/UYpnC/5/

    • 0