css - 获取两个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 的总高度最终超过其本身，则框 a 的高度应调整为适合 b 和 c。这目前有效，因为 .rightSide 设置为 display: table，div b 和 c 设置为 显示:表格行。

但是，如果 a 的内容导致它比右侧高，则右侧的高度保持不变——包含的 td 会调整大小，但它的内容没有。我希望 b (.mainContent) 填充它的剩余高度。我该怎么做？

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