CSS height relations between divs

Question 1

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>

Question 2

I decided to make something else. I am taking the wrapper away, because it is really annoying and I am centring all my divs with margin:0, auto; I gave all divs width:70% and everything is working now. This is my CSS:

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

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

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

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

.navigation_bar {
font-size:20px;
border-spacing:70px 20px;
margin-left:auto;
margin-right:auto;
position:relative;
}

td {
padding:0;
}

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

body {
background: url(Static/Index/background.jpg) no-repeat center center fixed; 
}

#wrapper_background{
background: url(Static/Index/content_background.png) no-repeat;
background-size:cover; 
}

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="header"></div>
        <div class="content">
        <p>*insert big big big text here*</p>
        </div>
        <div class="footer"></div>
    </body>
</html>

I am marking the closest answer to my problem as an answer. I think that my opinion on how it should be done shouldn't effect you answers. Thanks you for your help!

Question 3

You've accepted an answer already, but if you're curious about doing it with JavaScript/jQuery, this is how you'd do it:

http://jsfiddle.net/MGRq8/2/

var viewportHeight = $(window).height();
var headerHeight = viewportHeight * 0.1;
var contentMinHeight = viewportHeight * 0.8;
var footerHeight = viewportHeight * 0.05;

$('#header').height(headerHeight);
$('#content').css('min-height', contentMinHeight);
$('#footer').height(footerHeight);

$(window).resize(function() {
    $("#wrapper").height($(document).height());
});