CSS height relations between divs

First off I'd like to say that this HTML and CSS are both valid. Second, hi.

I am making a blog and I have this structure in mind:

<div class="wrapper">
   <div class="header"></div>
   <div class="content"></div>
   <div class="footer"></div>
</div>

I am trying to have everything in percentages but I am willing to compromise.

My wrapper is 100% off of my html and body.

html, body{
height:100%;
width:100%;
margin:0px;
overflow:auto;
}

In the said wrapper I have a header which I want to be 10% of the total wrapper height, content that is to be 80% of the parent and a 5% footer. My real problem is the content div, which I want it to be 80% if there is less text and expand more if there is more text but I'd like the other elements to have the same height.

I tried various solution on different threads and website but nothing really works the way I want it to, I also tried asking in some irc channels but they didn't help me either.

CSS:

.wrapper{
border:2px solid black;
height:100%;
width:70%;
margin:0 auto;
position:relative;
}

.header {
border:2px solid yellow;
min-height:10%;
margin:0 0;
overflow:hidden;
position:relative;
display:block
}

.footer {
border:2px solid blue;
min-height:35px;
margin:0 0;
bottom:0;
position:relative;
}

.content {
min-height:auto;
border:2px solid green;
margin:0 0;
padding:0;
position:relative;
}

html, body{
height:100%;
width:100%;
margin:0px;
overflow:auto;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> Blog </title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="content">
        <p>*insert big text here*</p>
        </div>
        <div class="footer"></div>
    </div>
    </body>
</html>

Solution

Try this (but note that there will be a 5% not covered: 10% + 80% + 5% = 95%):

CSS:

.wrapper_positioner{
margin:0 auto;
width:70%;
}
.wrapper{
position:absolute;
width:70%;
height: 100%;
}
.header {
border:2px solid yellow;
margin:0 0;
height:10%;
}

.footer {
border:2px solid blue;
margin:0 0;
height:5%;
min-height: 35px;
}

.content {
border:2px solid green;
margin:0 0;
padding:0;
height: 80%;
}

html, body{
width:100%;
height: 100%;
height: auto;
margin:0px;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> Blog </title>

    </head>
    <body>
    <div class="wrapper_positioner">
        <div class="wrapper">
            <div class="header"></div>
            <div class="content">
            <p>*insert big text here*</p>
            </div>
            <div class="footer"></div>
        </div>
    </div>
    </body>
</html>