A different kind of sticky footer

Hi johnlove,
I'm not sure I fully understand what you are after.
Have you tried using position:fixed for the footer.
Something like:

#footer{
  position:fixed;
  bottom:0;
  left:0;
}

Tony ...

Just tried it with no difference.

Right now, the center poemScroller has a constant height=xxem. The footer hugs the bottom of the viewport because of position=absolute and bottom=0. With a large window height, there is white space between the top of the footer and the poemScroller which is layed out above the footer.

This white space is caused by the fact that the wrapper that encloses the header + poemScroller + push has a negative margin-bottom = negative footer height. The height of the header + poemScroller + push exceeds the height of the header + poemScroller by an amount = height of the push. But the negative margin-bottom of this 3-parter makes this push height available for occupancy for anything below this wrapper, e.g. the footer.

As the user shortens the height of the window, the footer stays "stuck" to the bottom of the window and this white space shortens. The height of this white space is at a minimum = height of the push. As the window's height continues to shorten, the white space shortens and the top of the footer gets closer to the bottom of poemScroller .. until the footer top touches the bottom of the poemScroller.

After this point, the window's vertical scroll bar activates because the footer stops moving up. The footer cannot overlap any of the poemScroller because the height of the white space = 0 at this point.

What I am seeking occurs after the footer top = the bottom of the poemScroller, that is, after the white space shrinks to zero height. At this point, I would like the height of the poemScroller should decrease from its preset initial height=xxem In this manner, the vertical scroll bar of the window should never activate because the overall height of the view port will decrease in such a manner that the sum of the heights of all component divisions will always = the height of the viewport.

I'm not confident that you wished or needed this detailed analysis, but I definitely benefited by it. If you didn't want this, I for sure apologize for the noise.

John

Have you tried using JQuery?

You could have a containing div for all the content above the footer. Then you could dynamically set the height of this div to be the height of the window minus the height of the footer with overflow-y set to auto.

That should work right?

JQuery Height property

Burister

"You could have a containing div for all the content above the footer."

Got it. I know you were talking about JQuery here because you continued with "Then you could dynamically set the height of this div to be the height of the window minus the height of the footer with overflow-y set to auto."

With respect to JQuery, currently I know zero about it, other than it's a compact version of JS.

Anyway, here is the div that contains all the content above the footer:

#allAboveFooterWrapper {
	position:      relative;
	width:         100%;
	min-height:    100%;
	margin-bottom: -9.5em;
}

Then I have for the rest:

#poemScroller {
	position:       relative;
	min-height:     28em;
	height:         28em;
	overflow:       auto;
}
 
#poem {
	position:       relative;
	/* font and style stuff */
}
 
#pushFooter {
	height: 9.5em;
}
 
#footer {
	position:   absolute;
	bottom:     0em;
	height:     9.5em;
	/* font and style stuff */
}

Then, for the markup, I have:

<div id="allAboveFooterWrapper">
	<div id="header">
	</div>
 
	<div id="poemScroller">
		<div id="poem">
		</div>
	</div>
</div>
<!-- here's the white-space I talked about in my analysis -->
<div id="footer">
</div>

2 other folk insist that I need JavaScript to dynamically vary the height of poemScroller. That may turn out to be true, but I much prefer a pure CSS solution as long as the gyrations are minimum. Heaven knows that the math of sticky footers is very basic via the combination of one negative margin and one push:

push height = footer height = x
negative margin of wrapper of everything above footer = -x

John

[SOLVED] thanks to all who responded.

webpages.charter.net/jolove/Escort_Folder/test3.html

No wrappers, no pushes and no ugly? window vertical scroll bars

Whoopee!

Just tested on my Mac .. any takers for the windows world?

Thanks everyone, again and again!

John