Как получить дисплей ячейку таблицы, чтобы растянуть оставшиеся высоту таблицы в IE

Question

Назад в старые добрые времена таблиц для разметки, можно было бы сделать:

<div style="height: 400px;"> 
<table style="height: 100%"> 
    <tr> 
     <td>This cell sizes to its content</td> 
    </tr> 
    <tr> 
     <td height="100%">This cell takes up the remaining height. 
    </tr> 
    <tr> 
     <td>This cell sizes to its content</td> 
    </tr> 
</table> 
</div> 

Сейчас я пытаюсь добиться того же вещь используя display: table и display: table-cell. Вот моя попытка:

http://jsfiddle.net/p3jwr/6/

Это делает хорошо в FF и Chrome. Из 400px таблица должна строиться внутри, 1-я и 3-я строки занимают 100px, а вторая строка заполняет оставшееся пространство, работая до 200px.

В IE9 (и это самый низкий IE мне нужно поддерживать), второй ряд расширяется до 400 пикселей, который составляет 100% от размера родительского стола . Это растягивает таблицу на более чем 100% от ее родителя.

Цель состоит в том, чтобы растянуть стол, чтобы заполнить его родительский элемент, размер которого неизвестен, но определенно будет установлен, и чтобы средняя растяжка строки занимала пространство, не используемое первым или третьей строки.

Может ли кто-нибудь предложить обходное решение для IE? Он даже не должен работать в других браузерах, но я надеялся придерживаться display: table.

Answer 1

Надеется, что это помогает:

div > table { 
     height : auto !important; 
     height : 100%;    
     min-height : 100%;   
    } 

Это относится к большинству браузеров. Проверь это!

Answer 2

Попробуйте этот код,

<div style="height: 400px;"> 
    <table style="height: 100%"> 
     <tr style="height: 25%"> 
       <td>This cell sizes to its content</td> 
     </tr> 
     <tr style="height: 50%"> 
       <td>This cell takes up the remaining height. 
     </tr> 
     <tr style="height: 25%"> 
       <td>This cell sizes to its content</td> 
     </tr> 
    </table> 
</div> 

со следующими предположениями, 25% от 400px = 100px 50% от 400px = 200px