...

View Full Version : Stretchy footer!



ClockworkSpence
02-08-2012, 02:14 PM
Hi,

I've been looking everywhere for a solution to this but I keep finding the same sort of answer that isn't quite what I want.
I'm after a footer div that extends down to the bottom of the browser, not that sits at the bottom of the browser. I have a main dive with a content div within that but now I want a div below that (with content in) that stretched to the bottom of the browser. It will have a repeating bit of artwork too so basically the image stretched down to the bottom also.

I've tried height 100% and the bottom:0; but these just make the div stick to the bottom of the browser?

Spence

Excavator
02-08-2012, 03:30 PM
Hello ClockworkSpence,
Filling the remaining space from content to the bottom of the viewport could easily be done with a faux columns (http://nopeople.com/CSS%20tips/faux_columns/index.html) type approach applied to the body of the document.

ClockworkSpence
02-08-2012, 03:53 PM
But if you use faux columns to fill a large browser window wouldn't the scroll bar appear if the browser window was reduced?

Excavator
02-08-2012, 04:18 PM
But if you use faux columns to fill a large browser window wouldn't the scroll bar appear if the browser window was reduced?

Not till your content div exceeds the size of the viewport.

ClockworkSpence
02-08-2012, 04:26 PM
I'm not entirely sure how the faux columns work then? At the moment I have a main container, in that a container for my content and in that two divs, top and bottom (which is the one to stretch to the bottom of the browser). It's basicallt an artwork with a top and the bottom is a repeated piece of the artwork. I'm not sure how to implement the faux columns in this instance?

Spence

Excavator
02-08-2012, 05:03 PM
You are still thinking the bottom element is going to expand/contract to fill the remainder of the page. Instead, picture the body of the documnet with your y repeated image filling the entire page and your top element covering it.

dylanbaumannn
02-08-2012, 05:20 PM
Spence, Do you have a background color assigned to your footer? If so you should just be able to set the background-color of the body to the same color and it will emulate an extended footer below the actual footer itself.

ClockworkSpence
02-08-2012, 05:46 PM
The footer has an image assigned to it to repeat on the y axis but the body has a background image also. The body has a repaeting tiled image and the top artwork and bottom (footer) is a separate artwork that hovers ontop of the tiles body.

Hope this makes sense?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum