如何将父div高度继承给它的孩子

Question

我确实有 1 个父 div 和 2 个子 div，我希望这 2 个子 div 将等于其父高度，或者每当 1 个子 div 的内容扩展时，另一个子 div 也会扩展。我喜欢使用 % 而不是 px，这样当你放大或缩小高度时，高度大小保持不变，或者如果你们中的任何人知道一些技巧，我会很感激这是我的 js fiddle http://jsfiddle.net/deftmagic/29Puw/4/

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

Answer 2

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

还有更新后的fiddle。