Question

我有1个父div和2个子div，我希望这2个子div等于它的父高度或者每当1个子div的内容扩展时，其他子div也会扩展。我喜欢使用％而不是px，所以当你放大或缩小它的高度大小时保持不变或者如果你们中的任何人知道一些技巧可以用来工作我会很感激这里是我的js小提琴http://jsfiddle.net/deftmagic/29Puw/4/ < / p>

<div class="content-wrapper">
    <div class="task-pane">
        <p>sample</p>
        <p>sample</p>
        <p>sample</p>
    </div>
    <div class="tbl-div">
        <p>sample</p>
        <p>sample</p>
        <p>sample</p>
        <p>sample</p>
        <p>sample</p>
        <p>sample</p>
    </div>
</div>


.content-wrapper{
background:#000;
min-height:0;
width:100%;
  overflow:hidden;
    }
.task-pane{
    background:red;
    height:100%;  
    width:20%;
    float:left;
    }
.tbl-div {
    background:green;
     height:100%;
     width:80%;
    float:right;
}

注意：伙计们我已经搜索了一些相同的问题而且它发生了一些确实使用表但我的冲突就是当我使用表格标签它不能提供添加div标签里面我需要最多所以请如果有任何解决方案而不是表格可能是一些脚本我会很感激 - 谢谢^^

Answer 1

.content-wrapper {
    background:#000;
    overflow:hidden;
    position: relative;
}
.task-pane {
    background:red;
    min-height: 100%;
    width: 20%;
    left: 0px;
    position: absolute;
}

更新后的fiddle。

Answer 2

我必须多次这样做，并有几个技巧来解决这个问题，并根据具体情况而有所不同。对于这个例子，我将使父亲相对大小，较小的子句绝对，另一个默认，这样它将导致容器自己调整大小。

.content-wrapper{
    background:#000;
    min-height:0;
    width:100%;
    overflow:hidden;
    position: relative;
}
.task-pane{
    background:red;
    width:20%;
    position: absolute;
    top: 0; bottom: 0;
}
.tbl-div {
    background:green;
    width:80%;
    float:right;
}

更新了小提琴：http://jsfiddle.net/29Puw/9/

如何将父div高度继承到其子级

2 个答案: