A different kind of sticky footer

Reference others, e.g. http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css

Reference my page: http://webpages.charter.net/jolove/Escort_Folder/test.html

With the above sources as a backdrop, I've tried to analyze the work of fortysevenmedia.com, what I've accomplished so far and to describe where I'm trying to go:

Right now, the center poemScroller(yellow) has a fixed height=xxem. The footer(blue) hugs the bottom of the viewport because of position=absolute and bottom=0. With a tall window height, there is white space between the poemScroller and the footer.

This white space is caused by the wrapper that encloses the header + poemScroller + push. The wrapper has a negative margin-bottom = negative footer height. The height of this wrapper exceeds the height of the header + poemScroller by an amount = height of the push. But the negative margin-bottom of this 3-part wrapper 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 so this white space shortens. Because the poemScroller's height is fixed, this white space is the only variable and its height is, at a minimum = height of the push. The white space could be taller for a very tall window when the footer is way below the push.

As the window's height continues to shorten, the white space shortens and the footer gets closer to the bottom of poemScroller .. until the footer touches the poemScroller.

After this, the window's vertical scroll bar activates because the footer stops moving up. The footer cannot move up any more and overlap any part of the poemScroller because the height of the white space = its minimum = 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 0 height. When this white space can no longer decrease, I would like the height of the poemScroller to start decreasing from its preset initial height=xxem. The white space has shortened to 0 height .. now it's poemScroller's turn.

In this manner, the vertical scroll bar of the window should never activate until the height of the poemScroller has shrunk to zero.

[SOLVED on a Macintosh, Safari, Firefox, Opera, Navigator and SeaMonkey]
Thanks to all who responded.

Here's a new reference:


http://webpages.charter.net/jolove/Escort_Folder/test3.html
(http://webpages.charter.net/jolove/Escort_Folder/test3.html)

I changed the specifications .. what I am seeking to do now is have the top of the footer always immediately below #poemScroller. The bottom of the footer continues to equal the bottom of the window, or view port.

As the height of the window varies, so does the height of #poemScroller. This is the only variable. There is never any white-space, i.e., no push division. In this manner, the vertical scroll bar of the window should never activate .. ever.

Additional super thanks! to:
stackoverflow.com/questions/3484158/a-different-kind-of-sticky-footer-question

To accomplish this, I have done nothing to either #header or #footer because I do not want them to change. I have totally eliminated the enclosing #allAboveFooterWrapper and the #pushFooter, so all white space disappears. But, I have changed #poemScroller's position to absolute, with a corresponding top: and bottom:.

As I implied at the beginning, testing is successful for major Mac browsers. This afternoon, I plan to go to the library and test it on their IE7, Windows.

If anyone can squeeze in the time, I'd appreciate some testing on a few earlier versions of IE for Windows and perhaps other Windows browsers.

Thanks in advance.

John Love