Full-screen iframe with a height of 100%
You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
An alternative:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
To hide scrolling with 2 alternatives as shown above:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
Hack with the second example:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
To hide the scroll-bars of the iFrame, the parent is made overflow: hidden
to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn't have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!
How do you give iframe 100% height
You can do it with CSS:
<iframe style="position: absolute; height: 100%; border: none"></iframe>
Be aware that this will by default place it in the upper-left corner of the page, but I guess that is what you want to achieve. You can position with the left
,right
, top
and bottom
CSS properties.
Height equal to 100% is not working for IFrame
What you want could actually be done by changing the height : 100%;
value to height : 100vh;
.The vh is a unit called ViewHeight, and your full screen height is actually 100vh;
Here is a post about length units from the Mozilla team.
Try this code :
<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden"> <iframe id="iFrame1" src="http://www.stackoverflow.com" frameborder="0" style="overflow:hidden;height:100vh;width:100%; border : 1px solid red;"></iframe></div>
Make Iframe to fit 100% of container's remaining height
Update in 2019
TL;DR: Today the best option is - flexbox. Everything supports it nicely and has for years. Go for that and don't look back. Here is a code sample for flexbox:
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
How to make an iframe responsive full height and full width
Use viewport percentage lengths, vw
and vh
to set the height and width of the iframe
. Optionally, use calc
to subtract 4px
as the player seems to add this.
Viewport-percentage lengths defined a length relatively to the size of
viewport, that is the visible portion of the document. Only
Gecko-based browsers are updating the viewport values dynamically,
when the size of the viewport is modified (by modifying the size of
the window on a desktop computer or by turning the device on a phone
or a tablet).
body { margin: 0;}iframe { height:calc(100vh - 4px); width:calc(100vw - 4px); box-sizing: border-box;}
<iframe src="https://www.youtube.com/embed/7ipiybRLqZc" frameborder="0" allowfullscreen></iframe>
Is there a way to have an iframe in fullscreen?
Use Viewport width and height instead of percentages
iframe {
height:100vh;
width:100vw;
}
Related Topics
How to Add/Remove Several Classes in One Single Instruction With Classlist
Calling Webpacked Code from Outside (Html Script Tag)
Should I Write Script in the Body or the Head of the Html
Stopping Gif Animation Programmatically
Detecting If a Browser Is Using Private Browsing Mode
Why Is Using Onclick() in HTML a Bad Practice
Why Don't Self-Closing Script Elements Work
Strip HTML from Text JavaScript
How to Check Whether a Checkbox Is Checked in Jquery
Html-Encoding Lost When Attribute Read from Input Field
Cross-Browser Multi-Line Text Overflow With Ellipsis Appended Within a Fixed Width and Height
Replacing CSS File on the Fly (And Apply the New Style to the Page)
How to Get a Number of Random Elements from an Array
Appending HTML String to the Dom