0

他のdivのサイズに依存するdivの高さを持つ可能性はありますか?

これが例です

<div id="wrapper" style="height:400px;background-color:green;">

   <div id="content1" style="height:auto;min-height:50%;background-color: limegreen;">
       Content 1
   </div>

   <div id="content2" style="min-height:20%;background-color:lightblue;">
        Content  2
</div>

<div id="content3" style="min-height:20%;background-color:blue;">
      Content 3 
</div>

</div>

ここでも見ることができます：http://jsfiddle.net/kXfsY/28/

ご覧のとおり、div ラッパーは他の div と重なっていません。div content1 の高さを div ラッパーの少なくとも 50% 以上にしたいので、div ラッパー全体がオーバーラップします。div コンテンツ 2 と 3 のサイズは動的になり、内部に含まれるアイテムの数によって異なります。または、div コンテンツ 2 または div コンテンツ 3 が空になる可能性があります。その場合、div コンテンツ 1 が増加し、div ラッパーの全高が使用されると便利です。

それは可能ですか？

ありがとうございました

4

1 に答える 1

1

display: tableと でこれを行うことができますdisplay: table-row。#content2/要素を削除するか、#content3空のタグにすることができます。`#content1 要素は、何があっても残りのすべてのスペースを占有します。

http://codepen.io/cimmanon/pen/pHAcJ

#wrapper {
  height:400px;
  background-color:green;
  display: table;
  width: 100%;
  table-layout: fixed;
}

#content1 {
  min-height:50%;
  background-color: limegreen;
  display: table-row;
}

#content2, #content3 {
  height:20%;
  display: table-row;
}

#content2:empty, #content3:empty {
  display: none;
}

#content2 {
  background-color:lightblue;
}

#content3 {
  background-color:blue;
}
于 2013-03-08T15:57:29.503 に答える