获取正确的位置和宽度.bottom似乎是跨浏览器,CSS解决方案的最大障碍.
选项
浮动
如@joeellis所示,灵活宽度可以通过仅浮动左列,并将overflow：hidden应用于右列来实现.
任何浏览器都无法实现.bottom的位置.对于具有相等,可变高度的浮动列,没有CSS解决方案.绝对定位的.bottom元素必须位于右列div中,因此100％的宽度会给出正确的大小.但是由于右列不一定与左列一样高,所以将底部的位置.底部：0不一定将其放在容器的底部.
HTML表和CSS表
可以通过给左边的单元格宽度为1px而不指定正确的单元格的宽度来实现灵活的宽度.两个细胞都会增长以适应内容.任何额外的空间将被添加到正确的单元格.
如果.bottom位于正确的表格单元格中,则在Firefox中无法实现该位置. Firefox中的表格单元格中的相对位置没有影响;绝对位置和100％的宽度不会相对于正确的表格单元格.
如果.bottom被视为右列中的单独表格单元格,那么右侧和底部表格单元格的正确高度在Firefox以外的浏览器中无法实现.表单元格的高度不一样,宽度相同(Firefox除外).
CSS3 flexbox和CSS3网格
Flexbox和网格是不久的将来有前途的布局工具.但IE9或更早版本不支持flexbox,除IE10之外的任何浏览器都不支持网格.没有测试是否可以实现此布局,但浏览器支持可能会阻止它们成为当前的选项.
概要
>浮动不提供任何浏览器的解决方案.
> HTML表和CSS tables不提供跨浏览器解决方案.
> Flexbox不提供IE9 or earlier的潜在解决方案(并可能或可能不提供其他浏览器的解决方案).
> Grids只提供了一个潜在的解决方案IE10(并可能或可能不提供解决方案).
结论
目前似乎没有足够的CSS解决方案,其中一个可以在足够的相关浏览器中运行,可能的例外是flexbox(如果不需要IE9及更早版本的支持).
jQuery的
这是一个几个修改的演示,使用jQuery强制列具有相同的高度.两个演示的CSS和jQuery是一样的. HTML仅在左列和右栏有多少内容.所有浏览器中的两个演示都可以正常测试.相同的基本方法可以用于纯JavaScript.
为了保持简单,我将左右div的内部填充移动到子元素(.content).