0

私は 1 つの親 div と 2 つの子 div を持っています。これらの 2 つの子 div を親の高さと同じにするか、1 つの子 div のコンテンツが展開されるたびに他の子 div も展開されるようにしたいと考えています。私は px の代わりに % を使用するのが好きなので、ズームインまたはズームアウトしたときに高さのサイズが同じになるようにします。または、誰かがそれを機能させるためのトリックを知っている場合は、ここに私の js フィドル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タグを追加することを提供できないため、解決策があればお願いしますテーブルの代わりに、多分いくつかのスクリプトを感謝します--ありがとう^^

4

2 に答える 2

0

私はこれを複数回行う必要があり、これを実現するためのいくつかのトリックがあり、ケースによって異なります。この例では、親を相対的なサイズにし、小さい方の子を絶対的なサイズにし、もう 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/

于 2013-03-20T02:30:44.757 に答える
0 
.content-wrapper {
    background:#000;
    overflow:hidden;
    position: relative;
}
.task-pane {
    background:red;
    min-height: 100%;
    width: 20%;
    left: 0px;
    position: absolute;
}

そして更新されたfiddle。

于 2013-03-20T01:14:40.353 に答える