iframe没有全屏显示

Question

正如标题所说，我无法设法获得完整的scren iframe。

以下是代码：

<div data-role="page" id="p'+item.id+'"><div data-role="header" style="background-color: #FFFFFF;border:none;" data-position="fixed"><a href="#" onClick="location.href=\'documenti.html\'" data-role="button" data-icon="back" data-iconpos="notext" class="ui-btn-left">Home</a><img src="images/app/logo.png" id="navImg"/></div><iframe src="https://docs.google.com/gview?embedded=true&url=http://' + item.path + '" width="100%" height="100%" align="center" ></iframe></div>

演示：https://jsfiddle.net/579sxg8s/

Answer 1

您可以将其添加到您的第一个div元素：

style="width: 100vw; height: 100vh;"

将div的高度和宽度设置为 viewportheight / viewportwidth

的100％

由于你已经将iframe设置为100％的高度和宽度，它将继承其包含元素的大小，因此将该div的高度和宽度设置为视口高度和视口宽度，iframe将在宽度和高度上填充100％的空间。

在这里更新了小提琴：https://jsfiddle.net/john_h/579sxg8s/2/