Iframe не будет отображаться в полноэкранном режиме

Question

Как говорится в названии, я не могу получить полный scram 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

Вы можете добавить это ваш первый сНу элемента:

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

установить высоту и ширину DIV 100 % от viewportheight/viewportwidth

Поскольку у вас уже установлено значение iframe равным 100% для высоты и ширины, оно наследует размер его содержащего элемента, поэтому, устанавливая высоту и ширину этого div на высоту окна просмотра и ширину окна просмотра, iframe будет заполните 100% этого пространства как по ширине, так и по высоте.

обновлено скрипку здесь: https://jsfiddle.net/john_h/579sxg8s/2/