高度100%高度,内嵌显示

Question

我需要有2列divs.

右列将具有随机内容,其可具有1行或100行.

我想在没有javascript的情况下跟踪右列的高度.

我在尝试这个:

<div>
   <div style="display:inline-block; width:30%; vertical-align:top; height:100%; background:#FF0000;">
   </div>
   <div style="display:inline-block; width:30%; vertical-align:top;">
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
   </div>
</div>

问题是左列总是高度为0px,它应该显示一个与右列相同大小的红色列.

那么如何使用div做到这一点？

编辑

Rick Hitchcock的回答非常好,但不适用于Firefox.还有其他建议吗？

Answer 1

请display: table改用.

.wrapper {
  display: table;
  width: 60%;
}
.left {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#F00;
}
.right {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#0F0;
}

<div class="wrapper">
    <div class="left">
      LEFT
    </div>
    <div class="right">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
    </div>
</div>

更新

如果你真的需要内联块,我在这里将它们添加到表格单元格中,你可以根据自己的需要设置样式.

.wrapper {
  display: table;
  width: 60%;
}
.left {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#F00;
}
.right {
  display: table-cell;
  width:30%;
  vertical-align:top;
  background:#0F0;
}
.inner {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #0ff
}
.right .inner {
  background:#FF0;
}

<div class="wrapper">
    <div class="left">
      <div class="inner">
        LEFT
      </div>
    </div>
    <div class="right">
      <div class="inner">
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
        <div>CONTENT</div>
      </div>
    </div>
</div>