html - css : 仅通过使用“顶部”和“底部”属性设置内部 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;
}

问题：

我想删除' ' divheight中的 ' ' 属性，因此 div 的 ' ' 将仅取决于 ' ' 和 ' ' 属性。.targetheighttopbottom

.menu我的目标是在“ ”底部和“”底部之间保持固定距离.target，可选择不指定“ height”。

我真的希望我的问题足够清楚，如果不是问我，完整的代码在http://jsfiddle.net/dGkFq/3/。

非常感谢。

Answer 1

好吧，如果你使用，你可以：http position:absolute: //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/

用例 1：

用例 2：

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