css : set the height of inner div just by using 'top' and 'bottom' propreties

css : set the height of inner div just by using 'top' and 'bottom' propreties

this is the HTML code :
<div class="container">
<div class="menu">
<div class="target">
</div>
</div>
<div class="main"></div>
</div>
the CSS code :
.container{
position : absolute;
height : 100%;
width : 100%;
background-color : green;
}
.menu{
position : absolute;
top:0;
left :0;
height: 100%;
width : 30%;
background-color : orange;
}
.main{
position : absolute;
top:0;
left : 30%;
height : 100%;
width : 70%;
background-color : blue;
}
.target{
position : relative;
top : 20px;
left : 10%;
height: 70%;
bottom : 100px;
width : 80%;
background-color : pink;
overflow-y : auto;
}
Here is my question : I want to remove the 'height' property in the
'.target' div, so the 'height' of the div will only depends on the 'top'
and 'bottom' properties.
my objective is to have a fixed distance between the bottom of '.menu' and
the bottom of '.target', optionally without specifying the 'height'.
I really hope my question is clear enough, if not jst ask me, the complete
code is at http://jsfiddle.net/dGkFq/3/ .
Thanks very much.