CSS：只需使用 '頂' 和 '底' propreties設置內div的高度

Question

HTML代碼：

<div class="container"> 
    <div class="menu"> 
     <div class="target"> 
     </div> 
    </div> 
    <div class="main"></div> 
</div> 

的CSS代碼：

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

問題：

我想刪除'height'pr '.target'div中的operty，所​​以div的'height'將僅取決於'top'和'bottom'屬性。

我的目標是具有「.menu」的底部和「.target」底部之間的固定距離，任選而不指定「height」。

我真的很希望我的問題已經夠清楚了，如果不是jst問我，完整的代碼是http://jsfiddle.net/dGkFq/3/。

非常感謝。

Answer 1

嗯，你可以，如果你使用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; 
} 

Answer 2

http://jsfiddle.net/dGkFq/5/

USECASE 1：

用例2：

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