2

そのため、複数のソリューションを試しましたが、私のレイアウトでは機能していないようです。私が望んでいるのは、親の幅の 100% を占める 2 つの div を持つ 2 つの列です。各 div の高さは、コンテンツに基づいて可変です。

つまり、左側の 2 つの列が両方の列の高さを決定し、最後の div (右下) がスクロール可能になり、残りのスペースを占めるという考え方です。

ここに jsfiddle の例があります: http://jsfiddle.net/Split98/cndej/しかし、これには 2 つの問題があります: a) div C の高さを動的にすることはできません b) 私は本当にそうしませんdisplay:table-cell を使用したい

また、この一時的な解決策を自分のサイトに実装しようとすると、とにかくすべてが壊れました。そのため、何かを修正しようとする代わりに、タオルを投げて助けを求める解決策については考えません。

同じ高さに関する質問がたくさんあることはわかっていますが、両方の問題を解決する方法を見つけることができませんでした。左右の div を同じ高さにし、4 つの div すべてがスペースを占めるようにします。

したがって、これは最も基本的な形式です (繰り返しますが、可能であればテーブルセルなしでこれを達成したいと考えています):

<div id="wrap">
 <div class="left">
   <div class="A">A</div>
   <div class="B">B</div>
 </div>
 <div class="right">
  <div class="C">C</div>
  <div class="D">Need this to expand to fill</div>
 </div>
</div>


.left {
 width: 200px;
 display: table-cell;
}

.right {
 position: relative;
 width: 200px;
 display: table-cell;
 background: yellow;
} 

.A {
 background: blue;
 height: 100px;
}

.B {
 background: pink;
 height: 200px;
}

.C {
 background: red;
 height: 50px;
}

.D {
 width: 100%;
 position: absolute;
 bottom: 0;
 left: 0;
 top: 50px;
 right: 0px;
 background: green;
}

また、Javascript の使用に反対しているわけではありませんが、あまり得意ではありません。できれば、CSSで実現したいです。

みんなありがとう！

4

1 に答える 1

1

JavaScript を選択すると、このソリューションを jQuery で使用できます。

$(function(){
    $('.D').height( $('.right').height() - $('.C').height() );
})

http://jsfiddle.net/cndej/3/

于 2013-04-09T09:52:38.743 に答える