JavaScript全屏iframe，高度为100％

一尘不染

JavaScript全屏iframe，高度为100％

javascript

所有浏览器均支持iframe height = 100％吗？

我使用doctype作为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在我的iframe代码中，如果我说：

<iframe src="xyz.pdf" width="100%" height="100%" />

我的意思是说，它实际上会占用其余页面的高度吗（因为顶部还有另一个固定高度为50px的框架），所有主流浏览器（IE / Firefox /
Safari）都支持吗？

关于滚动条，即使我说了scrolling="no"，我也可以在Firefox中看到禁用的滚动条…如何完全隐藏滚动条并自动设置iframe高度？

阅读 405

2020-04-25

共1个答案

一尘不染

您可以使用框架集作为先前的答案状态，但是如果您坚持使用iFrame，则以下两个示例应该可以工作：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

替代：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

要隐藏具有2种替代方法的滚动，如上所示：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

用第二个例子破解：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

要隐藏iFrame的滚动条，请使父级overflow:hidden隐藏滚动条，并使iFrame的宽度和高度达到150％，这会将滚动条强制移出页面，并且由于主体没有滚动条人们可能不会期望iframe超出页面范围。这会隐藏全宽度的iFrame滚动条！

2020-04-25