When I use the following code to create an iframe:
<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
The iframe doesn't go all the way—a 10px white "border" surrounds the iframe. How could I solve this?
Here is an image of the problem:
The answer is
Try adding the following attribute:
scrolling="no"
You could try frameborder=0.
You can also use viewport-percentage lengths to achieve this:
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
Where 100vh represents the height of the viewport, and likewise 100vw represents the width.
body {_x000D_
margin: 0; /* Reset default margin */_x000D_
}_x000D_
iframe {_x000D_
display: block; /* iframes are inline by default */_x000D_
background: #000;_x000D_
border: none; /* Reset default border */_x000D_
height: 100vh; /* Viewport-relative units */_x000D_
width: 100vw;_x000D_
}<iframe></iframe>This is supported in most modern browsers - support can be found here.
Adding this to your iframe might resolve the issue:
frameborder="0" seamless="seamless"
Impossible to say without seeing a live example, but try giving both bodies margin: 0px
You can use this piece of code:
<iframe src="http://example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0%;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
Use this code instead of it:
<frameset rows="100%,*">
<frame src="-------------------------URL-------------------------------">
<noframes>
<body>
Your browser does not support frames. To wiew this page please use supporting browsers.
</body>
</noframes>
</frameset>
Use frameborder="0". Here's a full example:
<iframe src="mypage.htm" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="myPageURL.htm"> click here to view the page directly. </a></iframe>
To cover the entire viewport, you can use:
<iframe src="mypage.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>
And be sure to set the framed page's margins to 0, e.g., - Actually, this is not necessary with this solution.body { margin: 0; }.
I am using this successfully, with an additional display:none and JS to show it when the user clicks the appropriate control.
Note: To fill the parent's view area instead of the entire viewport, change position:fixed to position:absolute.
Source: Stackoverflow.com