chiaro è chiaro ma è complicato in più circostanze per il miscuglio di pixel e percentuali, x%-xpx non esiste.

avevo trovato una soluzione con due layer a simulare lo sfondo delle colonne ma se il contenuto eccede lo spazio assegnato opera sballa tutto così ti ho fatto un esempio interamente in percentuale, considera che i pixel che nel tuo disegno vedi proporzionati con differenti risoluzioni e monitor la perdono

<html>
<head>
<title>Loskyz 2</title>
<style type="text/css">
* {margin:0;padding:0}
html, body {height:100%}
body {
background:gray;
color:white;
text-align:center
}

.tutto {height:90%;
position:relative;
width:90%;
top:5%;
margin:auto;
text-align:left;
}
.contenitore {height:95%;
overflow:auto;
backgroundlive
}
.testa {min-height:10%;
height:auto!important;
height:10%;
background:maroon;
}
.piede {min-height:5%;
height:auto!important;
height:5%;
backgroundlive;

}
.contenuto {
height:89%;
overflow:auto;
width:60%;
float:left;
color:black;
background:silver
}
.menu {width:40%;
float:left;
height:89%;
overflow:auto;
background:teal
}
</style>
</head>
<body>
<div class="tutto">
<div class="contenitore">
<div class="testa">testa</div>
<div class="menu">menù</div>
<div class="contenuto">contenuto</div>
</div>
<div class="piede">piede</div>
</div>
</body>
</html>



se vuoi togliere lo spazio della barra che non serve aggiungi:

<!--[if IE 5.5]>
<style type="text/css">
body {overflow:auto}
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
body {overflow:auto}
</style>
<![endif]-->

sono commenti condizionati, necessari al posto di inserire la proprietà direttamente nel css principale perché ie5 la toglie ma si riprende lo spazio in .contenitore sballando il layout