css:只使用'top'和'bottom'属性设置内部div的高度

时间:2013-08-19 17:30:57

标签: html css

HTML code:

<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”div中的“.target”属性,因此div的“height”仅取决于“top} '和'bottom'属性。

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

我真的希望我的问题很清楚,如果不是jst问我,完整的代码是http://jsfiddle.net/dGkFq/3/

非常感谢。

2 个答案:

答案 0 :(得分:1)

嗯,如果您使用position:absolutehttp://jsfiddle.net/dGkFq/4/

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

答案 1 :(得分:0)

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

用例1:

enter image description here

用例2:

enter image description here

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