PDA

View Full Version : A 'footer' that sits at the bottom of page, no matter where nested



silv3r007
Mar 9th, 2010, 04:59 PM
Hi guys,

Ive been instructed to create a div that will sit positioned at the bottom of the page no matter where nested.

I can achieve a similar effect using position:fixed, but thats the bottom of the viewpoint not bottom of the page. Position:absolute just puts it at the bottom of the viewport temporarily.

I need something that can be placed like this <div id="holder">content</div> <div id="footer">Footer</div> or vice verse and still have the same outcome.

I know its bad form and so on but if I can get this to work ill be in the bosses good books :)

VIPStephan
Mar 9th, 2010, 05:04 PM
You need to put the “holder” div and the “footer“ div into one container which you position relative. Then you can position the footer absolute and it will always stay at the bottom of the container.

If that’s not an option and “holder” and “footer” are unrelated but footer still needs to be positioned according to the height of holder, then there would only be JavaScript to determine the height of holder and set the position of footer accordingly.

silv3r007
Mar 9th, 2010, 05:06 PM
the thing thats both annoying and impossible about this task is I wont have control over the websites that this gets put into.

we are handing out free links and it is supposed to just sit at the bottom.

could i use javascript to check the height of any containing div?

Excavator
Mar 9th, 2010, 05:11 PM
Good morning silv3r007,
Are you just looking for a full-height layout? Footer at the bottom even when there is not enough content on the screen to push it down there?

Here's one example with the footer inside the main container - http://nopeople.com/CSS/full-height-layout/index.html

And here's one with the footer seperate from the main container - http://www.cssstickyfooter.com/html-code.html

silv3r007
Mar 9th, 2010, 05:18 PM
Hi Excavator, I am after some sort of trick that will automatically send it to the bottom no matter where it is shoved into the HTML.

Excavator
Mar 9th, 2010, 05:27 PM
Hi Excavator, I am after some sort of trick that will automatically send it to the bottom no matter where it is shoved into the HTML.

http://nopeople.com/CSS/full-height-layout/index.html then. #footer is an ap'd element and could be entered anywhere in the markup.

llyfre
Apr 26th, 2011, 05:24 AM
here's one with the footer separate from the main container - http://www.cssstickyfooter.com/html-code.html

Excavator, this is a brilliant tutorial you passed on and perfectly solved the problem that brought me to this thread -a thousand thanks!