PDA

View Full Version : CSS 100% height.


paul363887
04-05-2009, 01:24 PM
I am looking to build a CSS template for my site but have ran into the following problem. I have a header, content and footer scenario, but I want the footer to always sit at the bottom of the screen if there is not enough content rather than have it half way up the page?

Thanks in advance,
Paul.

Joe Lowery
04-05-2009, 02:37 PM
We have an option for this in CSS Sculptor that you can add to any layout.

Here's the CSS we use:

/* The following code is for the fixed footer */
html, body {
height: 100%;
}
#outerWrapper {
min-height: 100%;
position: relative;
}
* html #outerWrapper {
height: 100%;
}
#outerWrapper #fixedFooterWrapper {
bottom: 0;
position: absolute;
width: 100%;
}

You'll need to wrap your standard footer div with an outer wrapper to work properly.

Best - Joe