0

我确实有 1 个父 div 和 2 个子 div，我希望这 2 个子 div 将等于其父高度，或者每当 1 个子 div 的内容扩展时，另一个子 div 也会扩展。我喜欢使用 % 而不是 px，这样当你放大或缩小高度时，高度大小保持不变，或者如果你们中的任何人知道一些技巧，我会很感激这是我的 js fiddle http://jsfiddle。净/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 标签，所以请如果有任何解决方案而不是表格，也许是一些脚本，我会很感激 - 谢谢^^

4

2 回答 2

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

和更新的小提琴。

于 2013-03-20T01:14:40.353 回答
0

我不得不多次这样做，并且有几个技巧来完成它，并根据情况而有所不同。对于这种情况，我将父级设置为相对大小，较小的子级设置为绝对大小，另一个默认设置，以便容器自行调整大小。

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

于 2013-03-20T02:30:44.757 回答