Disappearing Container With Absolute Positioning

I’m having a little trouble with a <footer> disappearing when I put it in absolute positioning. The container ‘wrapper’ is set to relative positioning with an automated height. I can understand if I set a fixed height within the ‘wrapper’ container that <footer> will display. But I’m dealing with a <body> background image set to ‘cover’ the full screen and not sure why <footer> is going below the fold of the image. You can’t see the footer visually on the screen, but you can see it in code view.

#wrapper {
height: auto;
position: relative;
}

footer {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
bottom: 0;
clear: both;
left: 0;
padding-top: 25px;
position: absolute;
width: 100%;
z-index: 110000;
}

Not sure what I’m missing, but I appreciate a second pair of eyes on this.

The bottom of wrapper is at the top of the viewport so your footer is above the viewport. You need something to base the height on.

i.e.


#wrapper{min-height:100%}
html,body{height:100%}

Thank you, Paul O’B! I was thinking that I had to create a fixed height, but then that wouldn’t cover the whole screen if the screen sizes were to change. AWESOME!

Thank you!