Question

在绝对定位的div中，我有一个表有一些非固定高度的行（但是有最大高度）。该表的最后一行包含100％高度的iframe。所以iframe应该填充div中的剩余高度。

我在Firefox＆amp; Chrome，但不是在IE9中。在IE中，iframe溢出了div。我只需要支持Firefox，Chrome和IE8 +。我使用HTML5 doctype（<!DOCTYPE html>）。

我使用表格，因为我无法弄清楚如何使它与div一起使用，但是也欢迎使用div的解决方案。主要问题是如何防止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>

修改请参阅操作：http://jsfiddle.net/BpFH9/1/（请参阅IE和Firefox中的滚动条差异）

编辑2： 我使用jQuery调整iframe高度，但是可以使用纯HTML方法吗？

将100％高度IFrame与非固定高度元素相结合

0 个答案: