make the last div of a page fill the remainder of the browser height

Question

I've seen other answers around, but they either didn't work, or involved JavaScript. Could some sort of @media query solve this?

I have a JSFiddle to show an example of the issue: http://jsfiddle.net/e4VWL/

You can see <footer class="copyright"> looks awkward because the left border on .wrapper isn't reaching the bottom of the page.

I want to find a CSS only solution to make the final div occupy the remainder of the height of the page for the browser viewing.

Answer 1

Give your body, html, and wrapper elements a height of 100%.

body,html,#wrapper {
    height: 100%;
}