How to position a "footer" div? (Aligning with "bottom:0" aligns to the viewport and not to the containing element :-( )
john
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.
dorayme
"john" <jo...@nospam.com> wrote:
If you are new to html, forget about trying to do this for now.
Just make a footer the last thing.
<div>header</div>
<div>content</div>
<div>footer</div>
No need to position it. You can style it for centering, for
font-size, for margins and padding. In the end it really does not
matter if the footer on very short pages is not right at the
bottom! The trouble you will go to to anything other than this
slight aesthetic imperfection to work cross browser is unlikely
to be worth it.
--
dorayme