Position: Bottom Issues
January 22, 2007 5:41 PM 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?
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?
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
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
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
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
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
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
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
posted by Hildago at 6:36 PM on January 22, 2007
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
Response by poster: 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
(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
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
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
posted by cheerleaders_to_your_funeral at 4:48 AM on January 23, 2007
Did this just this morning...
posted by Fezboy! at 9:44 AM on January 23, 2007
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
Response by poster: 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
posted by maxwelton at 11:45 AM on January 23, 2007
This thread is closed to new comments.
posted by maxwelton at 5:44 PM on January 22, 2007