Html 具有两个可变高度列的布局

我正在尝试在我的网页中创建以下两列布局：

+-------+---+
|       |   |
|       |   |
|   A   | B |
|       |   |
|       |   |
|       |   |
|       +---+
|       |   |
|       | C |
|       |   |
+-------+---+

具有以下特点：

左栏和右栏的宽度都是固定的

C的含量是固定的，所以C有一个固定的高度

A和B中的内容量可能不同（最终用户提供），因此A和B所需的最小高度可能不同

如果A需要的高度比B和C的总和还要高，那么B的高度应该被拉伸，使其始终接触C，并且C的底部与A的底部对齐

如果A所需的高度小于B和C的总和，则应拉伸A，使A和C的底部对齐

A和B有不同的边框和/或背景色，所以我不能通过不拉伸其中一个来作弊（C也不需要拉伸）

我尝试用div表示每个单元格，并使用jQuery的document ready事件将单元格调整到适当的高度，具体取决于最高的列。
大多数情况下，这是可行的。但是，由于A包含嵌入的YouTube视频，C包含嵌入的Google Maps部分，因此有很多动态内容正在进行调整，这有时会导致我的javascript代码使用错误的高度值，并扰乱布局过程。
此外，当你看到内容单元格被拉伸到正确的高度时，它看起来相当难看，即使如果它一直工作的话，我也能忍受

另一种选择是，我尝试使用一个表来进行此布局，因为它们内置了“保持所有列的高度相等”的行为。
这种方法的问题是，我必须使用“td rowspan=2”表示A，一旦我这样做，IE和Chrome就会忽略我在C上指定的任何固定高度，反而会使C过高

所以基本上我完全被困在如何实现这个（看似简单的）布局上。谁能给我指出正确的方向吗

---

我的目标是Chrome、FireFox和IE7+，但在IE7和IE8中，理想布局的合理近似是可以接受的。

试试这个混合div as table。 我在Mac上，但我不能在IE上测试它，但我认为它会在IE上很好地工作

HTML:

---

在这里查看演示：

好的，我正在工作，所以我现在只能这样做了，但它在IE7上运行得很好

前面有几句话。对于这个解决方案，我使用了表。现在使用表格并没有什么错——当您将它用于表格数据或在类似这样的罕见情况下。在这种情况下，必须使用基本css来解决这个问题。唯一的另一种方法是使用可能会疏远某些用户的技术（高级CSS）——最终，由您决定是否使用在每个人的浏览器中都不起作用的技术。如果您使用CSS3+，我肯定无法正常查看您的网站，因为我现在被IE7卡住了

我在IE7上测试了这个，效果很好。正如您所看到的，它也不是很重的代码

HTML

结果:

---

如您所见，此代码适用于两种情况：左列更大；或者，右栏更大。

请发布您尝试过的代码。如果您放弃IE支持，请发布flexbox（IE不值得支持）；-）请注意使用方框C绝对定位时的优美优雅。由于方框C的高度是固定的，我们将其高度作为表格单元格的填充，然后将方框C绝对显示在其填充的确切区域上。简言之，这实际上只是一个有2个单元格的2列表。我们“欺骗”眼睛认为它是3，但它不是。一个嵌套的表将是一个非常肮脏的黑客：）是的，这为我解决了它！我不得不做一个小的调整，因为您在td.right上使用了position:relative，但FF忽略了这一点，并默认将表作为C框的定位上下文。因此，我从td.right中删除了position:relative，并将C框相对于表进行了定位，现在它工作得很好。再次感谢！

<div id="table">
    <div id="table-cell-left">
        <div id="aid" class="row">A ID</div>
    </div>
    <div id="table-cell-right">
        <div id="bid" class="row">B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br /></div>
        <div id="cid" class="row">C ID</div>
    </div>
</div>    

#table{display:table;}

#table-cell-right,
#table-cell-left{display:table-cell;}

#table-cell-left{background:blue;}

#aid,#bid,#cid{width:150px}

#aid{height:100%;border:1px solid #ccc;}
#bid{height:auto;border:1px solid #000;background:red;}
#cid{height:20px;float:right;background:yellow}

<div id="cols">
<table>
    <tbody>
        <tr>
            <td class="left"">A Box</td>
            <td class="right">
                <div>B Box</div>
                <div>C Box</div>
            </td>
        </tr>
    </tbody>
</table>
</div>

#cols table td {
    width: 250px;
}
#cols table td.left {
    background: #f1f1f1;
}
#cols table td.right {
    padding: 0 0 250px 0;
    background: #ccc;
    position: relative;
}
#cols table td.right div + div {
    position: absolute;
    bottom: 0;
    width: 250px;
    height: 250px;
    background: #000;
    color: #fff;
}