DIV与父母相同高度

所以，我有两个DIV，就是第二个有可变内容。我需要第一个DIV与第二个DIV具有相同的高度，并且其上的文本要垂直居中。我发现有几个页面有类似的例子，但我还没有找到一个好的做法。在此先感谢！DIV与父母相同高度

2012-09-28 Derik

你有没有发现这样做的一个“好”的方式因为没有一个。您需要将它们嵌套在中间容器div中。 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks – TheZ

我明白了。那么有没有更好的方法来处理这个问题？如果不是，我只需要处理这一点。 – Derik

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; 
}

记住，这将使双方的高度时的高度包含页面。这并不是一个很好的方法。

来源

2012-09-28 23:18:19 L0j1k

感谢所有的答案。我实际上最终将静态div的背景颜色添加到容器中，并且没有垂直对齐文本... – Derik

@Derik一个很好的解决方案，只需注意第二个div越短越好，因为背景色会延伸过去“列”高度。 – TheZ

是的，我想过太多哈哈变量列上的高度！和thx！ – Derik

使用table和table-cell的css显示属性可以工作，但并不支持所有浏览器，如IE7及以下版本。

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

的方法是使用中介的div和方法可以在这里找到：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

来源

2012-09-28 23:24:10 TheZ

DIV与父母相同高度

回答

相关问题