0

我目前正在编写一个代码，我已将 iframe 的高度设置为 100%，但它似乎根本不起作用。我试图从中删除不必要的代码来演示问题，在此处查看代码（注意内联 css）：http: //jsfiddle.net/VfKqR/

这里是：

<!-- Start full page container -->
<div style="min-width: 830px; width: 100%; height: 100%; float: left;">

<!-- Start scoop menu -->
<div style="width: 188px; float: left;">

<table>
    <thead>
    <tr>
        <td>

<a href="http://rambler.ru" target="scoop" style="font-size:13px; letter-spacing: 0.7px; font-weight: bold;">Link tester</a>

        </td>
    </tr>
    </thead>
</table>

<!-- End scoop menu -->
</div>

<!-- spacer between divs -->
<div style="width: 20px; float: left;">&nbsp;</div>

<!-- Start iframe -->
<div style="min-width: 622px; width:74%; height: 100%; float: left;">

<iframe id="scoop" name="scoop" src="http://www.yahoo.com" style="border:0px #FFFFFF none;" name="myiframe" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%">

<!-- End iframe -->
</div>

<!-- End full page container -->
</div>

我无能为力似乎将高度固定为 100%。我在这里想念什么？

编辑：我刚刚在 Safari 中进行了测试，它运行良好，但是在最新版本的 Firefox（v14.0.1）中，它不起作用。

4

3 回答 3

2

您可以使用我刚刚编写的这个小 jquery 脚本来实现它：

jQuery(document).ready(function(){var height = $(window).height();
            $('iframe').css('height', height)
        });

http://jsfiddle.net/VurLy/

于 2012-08-08T20:49:38.813 回答
0

Checkout my solution Setting iframe to take remaining space in page without any JS.

You will need to clear some float's most likely (as those are the reason the iFrame will not scale) and most likely you will need to refactor your code a bit.

Hope that helps.

于 2012-11-21T08:38:45.970 回答
0

更新为 JAVASCRIPT

javascript：

<script type="text/javascript">
var sheet = document.createElement('style')
sheet.innerHTML = "html, body{height: 100%;}";
document.head.appendChild(sheet);
</script>

html:

<div style="min-width: 622px; width:74%; height: 100%; float: left;">​......
于 2012-08-08T20:19:53.567 回答