Как я могу сделать DIVs внутри дисплея: ячейка таблицы заполняет ячейку?

Question

У меня проблема с использованием дисплея: табличные функции CSS.Я заставляю свою базовую схему работать, но теперь я хотел бы, чтобы два DIV заполняли вертикальное пространство в ячейке таблицы.Звучит легко, но я не уверен, как это сделать.Вот пример:

aaaaaaaaaaaaaa  bbbbbbbbbbbbbbbbbbbbbbb
a            a  b  ccccccccccccccccc  b
a            a  b  c               c  b
a            a  b  c               c  b
a            a  b  c               c  b
a            a  b  c               c  b
a            a  b  ccccccccccccccccc  b
a            a  b  dddddddddddddddddd b
a            a  b  d                d b
a            a  b  dddddddddddddddddd b
a            a  b                     b
a            a  b                     b
aaaaaaaaaaaaaa  bbbbbbbbbbbbbbbbbbbbbbb

DIV a является боковой панелью и кодируется как дисплей: ячейка таблицы DIV b является областью тела и кодируется как дисплей: ячейка таблицы

Внутритело "b" У меня есть две колонки DIV с идентификаторами c и d.Я хотел бы, чтобы DIV d растянулся до нижней части DIV b, чтобы заполнить все оставшееся пространство.

Вот код со встроенными стилями, чтобы его было легко читать:

<div>
    <div id="a" style='display: table-cell; background-color: red;'>aaaaaa
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        aaaaaa
    </div>
    <div id="b" style='display: table-cell; background-color: green;'>bbbbbb
        <div id="c" style='background-color: pink;'>
            <br>
            <br>
        </div>
        <div id="d" style='background-color: yellow;'>
            <br>
            <br>
        </div>
    </div>
</div>

Демонстрация Fiddle

Кто-нибудь может придумать хороший способ кодирования этого?Я не могу заставить его работать.

Answer 1

Если вас интересует только визуальный эффект, вас могут заинтересовать искусственные столбцы: http://www.alistapart.com/articles/fauxcolumns/

Вот ваш пример, обновленный для использования этой техники (изображения не нужны в этом случае):

<div>
    <div id="a" style='display: table-cell; background-color: red;'>aaaaaa
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        aaaaaa
    </div>
    <div id="b" style='display: table-cell; background-color: yellow;'>
        <span style='background-color: green;'>bbbbbb</span>
        <div id="c" style='background-color: pink;'>
            <br>
            <br>
        </div>
        <div id="d">
            <br>
            <br>
        </div>
    </div>
</div>

http://jsfiddle.net/uMSEC/2/

Если вы действительно хотите расположить содержимое в конце столбца, вы все равно можете сделать это, сделав b relative и разместив еще один div с абсолютным значением bottom: 0.