Iframe 100% height inside body with padding
Whilst you can't say ‘height: 100% minus some pixels’ in CSS, you can make the iframe 100% high, then push its top down using padding. Then you can take advantage of the CSS3 box-sizing property to make the padding get subtracted from the height.
This:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#bar { height: 32px; background: red; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head><body>
<iframe src="http://www.google.com/"></iframe>
<div id="bar">foo</div>
<body></html>
Works on IE8, Moz, Op, Saf, Chrome. You'd have to carry on using a JavaScript fallback to make the extra scrollbar disappear for browsers that don't support box-sizing though (in particular IE up to 7).
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>
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!
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>
IFRAME Set Height to 100%
Try this out. It worked for me:
<html>
<body style="position:relative;">
<div style="position:fixed; left:0; right:0; top:0; bottom:0;margin:0px;padding:0px;overflow:hidden">
<iframe src="https://example.com/" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%">
</iframe>
</div>
</body>
</html>
Iframe embedded with 100% height in a div has strange bottom-margin
Add display:block
for your iframe
element – without that, it is rendered as an inline box, and therefor space is left for the under-lengths of glyphs like g, p, f etc. of (hypothetical) text that might be displayed on the same line.
See fiddle: http://jsfiddle.net/b5jgn/2/
(vertical-align:bottom
for the iframe would also work.)
How do I make an HTML iFrame fit the whole page without needing to scroll?
html,body{
width:100%;
height:100vh;
overflow:hidden;
margin:0px;
padding:0px;
border:none;
}
iframe{
width:100%;
height:100vh;
overflow:hidden;
margin:0px;
padding:0px;
border:none;
}
<iframe src="https://blogger.com" name="otherSite"></iframe>
Related Topics
How Could I Play a Shoutcast/Icecast Stream Using HTML5
Set Div to Remaining Height Using CSS with Unknown Height Divs Above and Below
Multi-Coloured Circular Div Using Background Colours
Why Td Width Is Not Working or Not Followed
Radio/Checkbox Alignment in HTML/CSS
How to Display Openweathermap Weather Icon
How to Prevent Div Tag Starting a New Line
Android Web App: Position:Fixed Broken
HTML5 Drag and Drop Images from a Toolbar to a Canvas
Making Buttons - <Button> or <Div>
Vertically-Aligned Inline-Block Element Not Perfectly Centered Within Container
Parallax Scrolling with CSS Only
How to Convert Nunit Output into an HTML Report
No Video with Supported Format and Mime Type Found. What Does This Mean and How to Change This
How to Auto Resize HTML Table Cell to Fit The Text Size
How to Combine Multiple CSS Rules
HTML to Excel: How Can Tell Excel to Treat Columns as Numbers