How to position a "footer" div? (Aligning with "bottom:0" aligns to the viewport and not to the containing element :-( )

Giganews Newsgroups
Subject: How to position a "footer" div? (Aligning with "bottom:0" aligns to the viewport and not to the containing element :-( )
Posted by:  John (John@nospam.com)
Date: Mon, 19 Feb 2007

Hi to All,

I am new to html authoring, so sorry if my terminology is not correct or
exact.

I would like to position a footer div to the bottom of the browser window.
As I research in the web shows this could be done a containing element with
"min-height: 100%;" and an absolute positioned element (div) inside, aligned
to bottom ("position: absolute; bottom:0px")

But here is the problem comes: Sometimes my page filled with more content
and vertical scrollbar shows up. In this case the bottom aligned footer not
aligned to the bottom of the containing div, but aligned to the bottom of
browser window (viewport?). This gives an erratic render because the footer
is in the middle of the content.

How can design the layout to statisfy this 2 requirement:

1) If the dynamic content of my page is less height than the browser window,
than the footer shows up at the bottom of the window
2) If the dynamic content of my page is more height than the browser window,
than the footer shows up at the bottom of the content, so we can scroll down
to see it?

thx for answer.

Replies