Tony33 Tony33 - 2 months ago 17
HTML Question

Iframe not going full screen

as the title says, i can't manage to have a full scren iframe.

Here is the code:

<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>


Demo: https://jsfiddle.net/579sxg8s/

Answer

You can add this to your first div element:

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

set the height and width of the div to 100% of the viewportheight / viewportwidth

Since you already have the iframe set to be 100% for both height and width, it will inherit the size of its containing element, so setting the height and width of that div to the viewport height and viewport width, the iframe will fill 100% of that space both in width and height.

updated fiddle here: https://jsfiddle.net/john_h/579sxg8s/2/

Comments