获取两个 div 以填充剩余高度答案

【问题标题】：Get two divs to fill up remaining height获取两个 div 以填充剩余高度
【发布时间】：2013-11-23 01:00:14
【问题描述】：

我想实现这样的布局：

|---| |------------|
|   | |      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，div 设置为 b 和 c 设置为 display: table-row。

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

JSFiddle

【问题讨论】：

第一件事。你为什么用tables？
是的，看起来 rowspan 可以完成这项工作，哈哈
@MelanciaUK 调整左右两边的高度，可能
@MelanciaUK 当然，桌子并不总是最好的主意，但它们确实有效。如果您有更好的想法，请将其添加为答案。
@Twon-ha 是的，这就是原因，但这不是使用tables 进行布局的借口。它们应该仅用于列出表格数据。

标签： css html-table

【解决方案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

【讨论】：

感谢您提供简单的解决方案。但问题是：现在，c 占据了剩余的高度。我怎样才能让b 去做呢？ jsfiddle.net/q9f3F/1
我认为您正在寻找类似this 的东西。是的，这很糟糕，但它确实有效。信用：stackoverflow.com/a/15536718/1721527
有趣的是，这与我之前的情况基本相同，除了使用真实的表格而不是 CSS 属性——但现在我明白它为什么起作用了。我只是在.rightSide 上错过了height: 100%。谢谢！