Tony Tambe Tony Tambe - 2 months ago 8
CSS Question

bootstrap layout - stick footer and content row to the bottom

I'm designing this site: http://ecostructionny.com. I'm just at the point where I'm laying out the home page and I'm a bit stuck. I want a footer row at the bottom that lists contact info, and then directly above it is a row of 3 blurbs of information. The background images are the main visual feature of the page, so I'm trying to leave space for them to show through.

Can anyone help with some suggestions? If there's a better way to lay it out, I'd love some other advice.

Thanks!

Answer

There is a good footer tutorial at

http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/

The demo page is here:

http://www.lwis.net/profile/CSS/sticky-footer.html

The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.

The footer is then given the following rules:

   #footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}