使浮动div高度相同

我有 2 个并排的 div。我预先不知道它们的高度，它根据内容而变化。有没有一种方法可以确保它们始终具有相同的高度，即使其中一个拉伸，仅使用 CSS？

我做了一个小提琴来展示。我希望红色和蓝色的 div 高度相同......

http://jsfiddle.net/7RVh4/ http://jsfiddle.net/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。然而，您可能会发现一些较旧的浏览器不理解此规则。见下文：

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