javascript - 将响应式 div 高度设置为等于其同级

Question

我有两个 div，其宽度由百分比控制。我希望右边的 div 和左边的 div 一样高，它根据它包含的图像的宽度和浏览器窗口的宽度来扩展和收缩。

有没有办法不用 javascript 来完成这个？

http://jsfiddle.net/5JU2t/

Answer 1

实现此目的的最简单方法是使 .right div 绝对定位并将 top 和 bottom 设置为 0.

只需记住相对定位父 (.main) div 并移除所有 float :

.right {
    bottom:0;
    position: absolute;
    right:0; 
    top: 0;
}

.main {
    position: relative;
}

工作示例:http://jsfiddle.net/5JU2t/1/

注意事项

示例中右栏稍长的原因是图像下方添加了空白。如果您仅在此列中使用图像，则可以将 float: left 添加到图像中以解决此问题:

工作示例:http://jsfiddle.net/5JU2t/2/