Tony33 Tony33 - 1 year ago 106
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''"><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="' + item.path + '" width="100%" height="100%" align="center" ></iframe></div>


Answer Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download