获得两个div来填补剩余高度

Question

我想实现这种布局：

|---| |------------|
|   | |      b     |
| a | |____________|
|   | |------------|
|___| |______c_____|

代码：

<table>
    <tr>
        <td class="leftSide">a</td>
        <td class="rightSide">
            <div class="mainContent">b</div>
            <div class="bottomContent">c</div>
        </td>
    </tr>
</table>

如果a b的高度应该调整大小，则c和.rightSide如果它们的总数高于其自身，则会适合display: table和b。目前有效，因为c设置为display: table-row，div a和td设置为b。

但是，如果.mainContent的内容导致它高于右侧，则表示右侧的高度保持不变 - 包含{{1}}调整大小，但其内容不会。我希望{{1}}（{{1}}）填充剩余的高度。我该怎么做？

JSFiddle

Answer 1

我认为您正在寻找rowspan属性。这样，您就可以使一个td跨越多行。

尝试这样的事情：

<table>
    <tr>
        <td class="leftSide" rowspan="2">a</td>
        <td class="rightSide">b</td>
    </tr>
    <tr>
        <td class="rightSide">c</td>
    </tr>
</table>

JSFiddle