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:
10 Answers
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 and make sure the parent has a position other than static.
The body has a default margin in most browsers. Try:
body {
margin: 0;
}
in the page with the iframe.
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 {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}<iframe></iframe>This is supported in most modern browsers - support can be found here.
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>
Try adding the following attribute:
scrolling="no"
Impossible to say without seeing a live example, but try giving both bodies margin: 0px
You can use this piece of code:
<iframe src="" 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>
Adding this to your iframe might resolve the issue:
frameborder="0" seamless="seamless"
Hope it helps :)
You could try frameborder=0.
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>
