Html – “Full screen” </h1> </header> <p style='font-size:1.2em'><span class="mr-2 badge badge-success">html</span><span class="mr-2 badge badge-info">iframe</span></p> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="5017103864" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="entry-content"> <p>When I use the following code to create an iframe:</p> <pre><code><iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe> </code></pre> <p>The iframe doesn't go all the way—a 10px white "border" surrounds the iframe. How could I solve this?</p> <p>Here is an image of the problem:</p> <p><img src="https://i.stack.imgur.com/esW9a.png" alt="Screenshot of site"/></p> </div> <div id="comments" class="comments-area"> <div class="row"> <div class="col-12"> <div class="mt-3 border-bottom border-success"> <h4 class="text-success"><i class='fa fa-check-circle text-success mr-3'></i><span>Best Answer</span></h4> </div> <div class='bg-transparent mb-3'> <p>To cover the entire viewport, you can use:</p> <pre><code><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> </code></pre> <p><strike>And be sure to set the framed page's margins to 0, e.g., <code>body { margin: 0; }</code>.</strike> - Actually, this is not necessary with this solution.</p> <p>I am using this successfully, with an additional <code>display:none</code> and JS to show it when the user clicks the appropriate control.</p> <p>Note: To fill the parent's view area instead of the entire viewport, change <code>position:fixed</code> to <code>position:absolute</code>.</p> </div> </div> <div class="col-4"></div> </div> </div> <div id="related-embeded" class="related-embeded-area"><div class="row"><div class="col-12"><div class="mt-3 border-bottom border-success"><h4 class="text-info"><i class='fa fa-check-circle text-info mr-3'></i><span>Related Solutions</span></h4></div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnotes.com/tecnote/html-remove-border-from-iframe/'>Html – Remove border from IFrame</a></h5></div><div class='bg-transparent mb-3'> <p>Add the <code>frameBorder</code> attribute (note the <strong>capital ‘B’</strong>).</p> <p>So it would look like:</p> <pre><code><iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe> </code></pre> </div><div class="mt-3 mb-3 border-bottom"><h5><a href='https://itecnotes.com/tecnote/html-make-a-div-fill-the-height-of-the-remaining-screen-space/'>Html – Make a div fill the height of the remaining screen space</a></h5></div><div class='bg-transparent mb-3'> <h3>2015 update: the flexbox approach</h3> <p>There are two other answers briefly mentioning <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" rel="noreferrer nofollow ugc">flexbox</a>; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.</p> <blockquote> <p>Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.</p> <p>(taken from <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" rel="noreferrer nofollow ugc">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes</a>)</p> </blockquote> <p>All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.</p> <p>To check current support you can also see here: <a href="http://caniuse.com/#feat=flexbox" rel="noreferrer nofollow ugc">http://caniuse.com/#feat=flexbox</a></p> <h3>Working example</h3> <p>With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.</p> <p></p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { height: 100%; margin: 0; } .box { display: flex; flex-flow: column; height: 100%; } .box .row { border: 1px dotted grey; } .box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ } .box .row.content { flex: 1 1 auto; } .box .row.footer { flex: 0 1 40px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code> <div class="box"> <div class="row header"> <p><b>header</b> <br /> <br />(sized to content)</p> </div> <div class="row content"> <p> <b>content</b> (fills remaining space) </p> </div> <div class="row footer"> <p><b>footer</b> (fixed height)</p> </div> </div></code></pre> </div> </div> <p></p> <p>In the CSS above, the <a href="https://developer.mozilla.org/en/CSS/flex" rel="noreferrer nofollow ugc">flex</a> property shorthands the <a href="https://developer.mozilla.org/en/CSS/flex-grow" rel="noreferrer nofollow ugc">flex-grow</a>, <a href="https://developer.mozilla.org/en/CSS/flex-shrink" rel="noreferrer nofollow ugc">flex-shrink</a>, and <a href="https://developer.mozilla.org/en/CSS/flex-basis" rel="noreferrer nofollow ugc">flex-basis</a> properties to establish the flexibility of the flex items. Mozilla has a <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" rel="noreferrer nofollow ugc">good introduction to the flexible boxes model</a>.</p> </div></div></div></div> </div> <div class="col-12 col-md-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="2985450245" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class='mt-3 ml-4 border-bottom border-success'><h6><span>Related Topic</span></h6></div><ul class='list-group list-group-flush'><li class="list-group-item"><a href='https://itecnotes.com/tecnote/html-how-to-apply-css-to-iframe/'>Html – How to apply CSS to iframe</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-jquery-javascript-accessing-contents-of-an-iframe/'>Javascript – jQuery/JavaScript: accessing contents of an iframe</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-frame-buster-buster-buster-code-needed/'>Javascript – Frame Buster Buster … buster code needed</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/javascript-get-the-size-of-the-screen-current-web-page-and-browser-window/'>Javascript – Get the size of the screen, current web page and browser window</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/css-scale-iframe-css-width-100-like-an-image/'>Css – Scale iFrame css width 100% like an image</a></li><li class="list-group-item"><a href='https://itecnotes.com/tecnote/html-bootstrap-3-two-columns-full-height/'>Html – Bootstrap 3 two columns full height</a></li></ul> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8728145350222960" data-ad-slot="8970621700" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <footer class="entry-footer"> </footer> </article> </div> </div> </div> </main> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info"> </div> </footer> </div> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4' id='jquery-js'></script> <script type='text/javascript' id='jquery-js-after'> jQuery(document).ready(function ($) { const elements = document.getElementsByClassName("js-post-notice"); while(elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } }) </script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js?ver=4.3.1' id='bootstrap4-js'></script> <script type='text/javascript' src='https://itecnotes.com/wp-includes/js/comment-reply.min.js?ver=5.9.10' id='comment-reply-js'></script> </body> </html>