DIV - Force height 100%=/= page height?

Question

I am in a big of an issue here with a design I am trying to set up. Here is the website for a reference;

http://throwbackhero.com/index1.php

The problem is that I set the body to height: 100%; in the stylesheet and on the #wrapper div as well. The height goes off the current page height and does not take into account that there are other divs that could cause overflow.

I would like, a blank page to be the size of the browser even if the vertical size of the browser is changed, the content/wrapper div will shrink to accommodate.

Can this be done?

EDIT

Okay so clearly my original question was extremely confusing. Here is a picture;

So, in pic 1 (the left) is the issue. With height 100%; on the wrapper and content divs, it is creating that bad boy. I want it to look like picture, where the white/gray area grows/shrinks depending on the size of the browser...

Answer 1

The easiest way is simply using CSS:

height: 100vh;

Where 'vh' stands as vertical height of the browser window. Responsive to resizing of brower and mobile devices.

Answer 2

Give body,HTML & main DIV height 100%. write like this:

body,html{height:100%;}

.parent{
    min-height:100%;
    width:400px;
    margin:0 auto;
    background:red;
}

Check this http://jsfiddle.net/3VUGt/