javascript - 如何将父div高度继承给它的 child

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

更新 fiddle :http://jsfiddle.net/29Puw/9/