Внутри абсолютно позиционированного div у меня есть таблица с несколькими строками не фиксированной высоты (но с максимальной высотой). Последняя строка этой таблицы содержит фрейм со 100% высотой. Таким образом, iframe должен заполнить оставшуюся высоту внутри div.
Это работает в Firefox и Chrome, но не в IE9. В IE iframe переполняет div. Мне нужно только поддерживать Firefox, Chrome и IE8 +. Я использую тип документа HTML5 (<!DOCTYPE html>).
Я использую таблицы, так как не могу понять, как заставить его работать с divs, однако приветствуется решение только с divs. Главный вопрос - как предотвратить переполнение iframe основного div во всех браузерах.
<div style="position: absolute; top: 387px; bottom: 3px; left: 205px; right: 3px;">
<table style="width: 100%; height: 100%;">
<tr>
<td>text 1</td>
</tr>
<tr>
<td>text 2</td>
</tr>
<tr>
<td style="height: 100%; border-top: 1px dotted #b0bfd0; padding: 0;">
<iframe style="height: 100%; width: 100%;" frameborder="0" src="testpage.html" />
</td>
</tr>
</table>
</div>
Edit:
Посмотрите это в действии: http://jsfiddle.net/BpFH9/1/ (см. Разницу в полосе прокрутки в IE и Firefox)
Редактировать 2:
Я работал с jQuery, регулируя высоту iframe, но возможен ли чистый html-подход?