How can I ensure that my absolutely positioned div is tall enough to meet my sticky footer?

My page has the main content, a sticky footer and a right panel that is absolutely positioned. I normally never use absolute positioning, but in this case I need the panel to overlap the main content when the browser window is thin. Currently it looks correct until I shrink my window too far vertically. When the content continues below the page break, the absolutely positioned div no longer meets the footer. How can I ensure that the absolutely positioned div is always long enough to meet the footer so there is no gap?

Here's the HTML:

<body>
    <div id="abs"></div>
    <div class="wrapper">
        <p>Website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
    </div>
</body>

And the CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}   
.footer {
    background-color:#333;
    position:relative;
    z-index:40;
}   
#abs {
    position:absolute;
    right:0;
    top:0;
    z-index: 20;
    background-color:#579ECF;
    width:100px;
    min-height: 100%;
}
p {
    width:700px;
}

Solution

You absolutely position abs in the body tag. For reasons I won't go into body is the height of the window, not of the content. So when you set it to 100% it is only as tall as the screen.

Instead move the abs div into the main content div, set main content to relative, and specify top: 0 and bottom: 0 to stretch abs out.

http://jsfiddle.net/3jegZ/

.wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}  
#abs {
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 20;
    background-color:#579ECF;
    width:100px;
}