I have a page that uses show/hide layers to display different content when tabs are clicked. The problem is that when viewing the layer with the smallest amount of content, the browser scrollbar shows extra space--the same length of what the page would be if the longest layer were being displayed:

I think this post is related:
(hard to tell with the different english)

I did find this old sitepoint post which is relevant, but I couldn't figure out how to implement the js into my layout:

Finally, I know there's probably a way to get this page to work using pure CSS without the JS to snap the footer layer, but after a day trying to get it to work based on this link, I gave up and stuck with what I had:

So, how to get those show hide layers working without the extra scrollbar, and working in tandem with the snap layer behavior, cross browser? All comments appreciated!