html - DIV 与父级高度相同

Question

所以，我有两个 DIV，因为第二个有可变内容。我需要第一个 DIV 与第二个 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>​

默认.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

table使用and的 css display 属性table-cell可以工作，但并非所有浏览器都支持，如 IE7 及以下。

我已经通过更改更新了您的示例：http: //jsfiddle.net/a8LjU/5/

另一种方法是使用中间 div，该方法可以在这里找到：http: //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks