html - DIV 親と同じ高さ

Question

したがって、2 つ目の DIV には可変コンテンツがあるため、2 つの DIV があります。最初の DIV を 2 番目の DIV と同じ高さにし、その上のテキストを垂直方向の中央に配置する必要があります。同様の例を含むページをいくつか見つけましたが、良い方法が見つかりませんでした。前もって感謝します！

〜このように：http://jsfiddle.net/a8LjU/4/

Answer 1

page.css:

<div class="container">
<div class="first">
  TEXT TEXT TEXT TEXT TEXT
</div>
<div class="second">
  TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT         
</div>
</div>​

default.css:

body{
  height:100%;
}
html{
  height:100%;
}

.container{
  float:left;
  height:100%;
}

.first, .second{
  float:left;
  background:#00C8FF;
  height:100%;
  width:50px;
}

.second{
  background:#006EFF;
}

これにより、両方の高さが含まれているページの高さに設定されることに注意してください。これを行うための本当にきれいな方法はありません。

Answer 2

と の css 表示プロパティを使用するtableことtable-cellはできますが、IE7 以下のようなすべてのブラウザーでサポートされているわけではありません。

変更を加えて例を更新しました: http://jsfiddle.net/a8LjU/5/

別の方法として中間 div を使用する方法があります。その方法は次の場所にあります: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks