Получить две дивы, чтобы заполнить оставшиеся высота

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 «s высота должна изменить размер подходит как b и c если их итог выше, чем он сам. В настоящее время это работает, потому что .rightSide установлено на display: table, с divs b и c установлено на display: table-row.

Однако, если содержание 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