Question

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

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

使用table和table-cell的css显示属性可以正常工作，但IE7及以下版本的浏览器不支持此功能。

我已使用更改更新了您的示例：http://jsfiddle.net/a8LjU/5/

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

DIV与父母一样高

2 个答案: