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

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; } 

the question:

i want remove 'height' property in '.target' div, 'height' of div depends on 'top' , 'bottom' properties.

my objective have fixed distance between bottom of '.menu' , bottom of '.target', optionally without specifying 'height'.

i hope question clear enough, if not jst ask me, complete code @ http://jsfiddle.net/dgkfq/3/ .

thanks much.

well, can if use position:absolute: http://jsfiddle.net/dgkfq/4/

.target{     position : absolute;     top : 20px;     left : 10%;     bottom : 100px;     width : 80%;     background-color : pink;     display:block;     overflow-y : auto; }