使浮动div的高度相同

本文介绍了使浮动div的高度相同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有两个并排的div。我不知道他们的高度，它根据内容改变。有没有办法确保他们总是相同的高度，即使他们中的一个伸展，只有CSS？

I have 2 divs side by side. I don't know the height of them upfront, it changed according to the content. Is there a way to make sure they will always be the same height, even when one of them stretches, only with CSS?

我做了一个小提琴来显示。我想让红色和蓝色的div是相同的高度...

I made a fiddle to show. I want the red and blue divs to be the same height...

http：/ /jsfiddle/7RVh4/

这是css：

#wrapper { width: 300px; } #left { width:50px; background: blue; float:left; height: 100%; /* sadly, this doesn't work... */ } #right { width:250px; background: red; float:left; }

推荐答案

float，使用 display：table-cell 。你可能会发现一些旧的浏览器不理解这条规则。见下面：

You could try instead of using float, use display: table-cell. You might find some older browsers don't understand this rule however. See below:

#wrapper { display: table; // See FelipeAls comment below width: 300px; } #left { display: table-cell; width: 50px; background: blue; } #right { display: table-cell; width: 250px; background: red; }