Tags:





Position: Bottom Issues
January 22, 2007 5:41 PM   RSS feed for this thread Subscribe

CSS/HTML/Javascript: I cannot get all browsers to obey my wishes regarding the placement of my absolutely positioned footer.

I cannot link to my dev page because of non-disclosure issues, but hopefully this description will suffice.

Code model, with relevant bits:

<html>
   <div id="container" style="min-height: 100%">
      <div id="footer" style="bottom: 0">
      </div>
   </div>
</html>

One page has a file tree, with javascript used to show/hide the branches of the tree. When a branch is expanded, if the 'container" div then exceeds its min-height, Firefox correctly adjusts the position of the footer to the bottom of the div. IE 6 & 7 do not, leaving the footer right where it was, now hanging in the middle of the div (once you scroll, anyway, if that makes sense). In my javascript function, I was able to "fix" that by (simplifying):

style.footer.bottom = ';
style.footer.bottom = '0';

Alas, this trickery does not make Safari play nice--it still displays the hanging footer.

Is there a better way to approach this? Or is there a Safari-specific "hack" I can introduce to get it to realize that the container div's bottom has changed?
posted by maxwelton to computers & internet (13 comments total) 1 user marked this as a favorite
I should mention, I guess, that "footer" is positioned absolutely. Container is positioned relatively.
posted by maxwelton at 5:44 PM on January 22, 2007


What happens when you change the style on the footer to "position:relative;bottom:0px"?
posted by cerebus19 at 5:45 PM on January 22, 2007


Whoa. You have an absolutely positioned div within a relatively positioned div? How is that supposed to work?
posted by cerebus19 at 5:46 PM on January 22, 2007


see here: http://scott.sauyet.com/CSS/Demo/FooterDemo2.html
posted by ReiToei at 6:02 PM on January 22, 2007


maybe a dumb question, but why does the footer have to be absolutely positioned? Why cant it just go at the bottom of the HTML? (below the container)

if the relative div is changing size and pushing the window bigger, its going to be hard to get it to work, short of positioning the absolute div based on the scroll height (and I wouldnt recommend making it so complicated)
posted by drjimmy11 at 6:06 PM on January 22, 2007


The only cross-browser way to make footers stick to the bottom is, sadly, javascript positioning. Get the client width and height, then position content relative to the bottom. Then either have a trigger that detects browser resizing, or poll the browser every few tenths of a second.
posted by Civil_Disobedient at 6:28 PM on January 22, 2007


I'll erase my suggestions now, because I think ReiToei's example is what you need.

One thing worth pointing out is that I'm pretty sure min-height isn't supported by IE 6 and Safari.

Whoa. You have an absolutely positioned div within a relatively positioned div? How is that supposed to work.

Actually that works really well for relatively positioning divs within other divs. It's counter-intuitive, but if you've got an absolutely positioned div within a relatively positioned div, your top and left declarations on the "inside" div will be relative to the "outside" div, rather than to the body.
posted by Hildago at 6:36 PM on January 22, 2007


Thanks for all the feedback. I kind of feared it would be "measure the viewport" kinda stuff.

(I know IE6 doesn't recognize min-height, I use a selector "hack" to set the height to 100% for IE6, just neglected to mention it since IE6 isn't a problem. I was a little surprised to find that IE7 had this issue, frankly, as the CSS support there is otherwise fine.)

I'll investigate re-arranging divs on the page. I suppose the other thing I could do would be to overflow the container div so that it scrolls and place the footer outside of it...then again, simply moving the footer outside the container might solve this, but I have my doubts.
posted by maxwelton at 7:05 PM on January 22, 2007


cerebus19: This is a standard part of the CSS
positioning model:

The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example).
posted by Freaky at 7:06 PM on January 22, 2007


I had this issue before. My solution was based on the example linked to by ReiToei, but I still had to do some hacking about with it as I recall. I added a #contents div within the #container div which was absolutely positioned and placed the #footer div within this #contents.

The height property for each section was
html, body{ height:100%;
min-height:100%
}

#container{
min-height:100%;
height: auto;
}

* html #container{
height:100%;
}

#content{
min-height:100%;
}


Hope that helps
posted by TwoWordReview at 2:40 AM on January 23, 2007


footerStickAlt seems to be wgat you're looking for.
posted by cheerleaders_to_your_funeral at 4:48 AM on January 23, 2007


Did this just this morning...
iHeight = 0;
if( typeof window.innerHeight != "undefined" ) {
	iHeight = window.innerHeight;
}
if( typeof document.documentElement.clientHeight != "undefined" ) {
	iHeight = ( document.documentElement.clientHeight > iHeight ) ? document.documentElement.clientHeight : iHeight;
}
if( typeof document.getElementsByTagName( "body" )[ 0 ].clientHeight != "undefined" ) {
	iHeight = ( document.getElementsByTagName( "body" )[ 0 ].clientHeight > iHeight ) ? document.getElementsByTagName( "body" )[ 0 ].clientHeight : iHeight;
}
div = document.getElementById( "footer" );
iTop = div.offsetTop;
d = div;
while( d = d.offsetParent ) {
	iTop += d.offsetTop;
}
div = document.getElementById( "footer" );
div.style.position = "absolute";
if( iHeight > iTop ) {
	div.style.top = ( iHeight - ( 29 + div.style.height ) ) + "px";
/* where 29 is some constant that works for my page but that you can determine for yourself by playing around */
}
div.style.display = "block";
Just wrap it in a function and call it every time you have a "resizing" event.
posted by Fezboy! at 9:44 AM on January 23, 2007


Thanks again, I'll do some fooling around later today and see what works best. I surely appreciate it. I'm doubling what I said I would pay you for this.
posted by maxwelton at 11:45 AM on January 23, 2007


« Older How much of the revenue genera...   |   Where do I get 2.5 year old bl... Newer »
This thread is closed to new comments.