Html DIV与父级的高度相同

我有两个div，第二个div的内容是可变的。我需要第一个DIV与第二个DIV具有相同的高度，并且上面的文本垂直居中。 我已经找到了几页类似的例子，但我还没有找到一个好的方法。 提前谢谢

~就像这样：

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显示属性可以工作，但并非所有浏览器都支持它，如IE7及以下版本

我已使用以下更改更新了您的示例：

---

另一种方法是使用中间div，方法可以在这里找到：

您还没有找到一种“好”的方法，因为没有。您需要将它们嵌套在中间容器div中。我懂了。没有比这更好的办法了吗？如果不是的话，我就只能用这个了。谢谢大家的回答。事实上，我最终将背景色从静态div添加到容器中，并且没有垂直对齐文本…@Derik这是一个好的解决方案，请注意第二个div会变短，因为背景色会延伸到“列”高度之外。是的，我也考虑过了，哈哈，变量列上的最小高度！还有thx！

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

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

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

.second{
  background:#006EFF;
}