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>
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>
How to make width and height of iframe same as its parent div?
you have a lot of typos.
a correct markup should be like:
<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0"
style="position: relative; height: 100%; width: 100%;">
...
</iframe>
also, if this frame already has an ID, why don't you put this in CSS like this (from a separate stylesheet file):
#myIframe
{
position: relative;
height: 100%;
width: 100%;
}
and HTML
<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0" > ... </iframe>
mind that scrolling
& frameborder
are iframe
attribute, not style
attribute.
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.
Related Topics
How to Remove the Arrow from a Select Element in Firefox
Changing Image on Hover With Css/Html
Change Div Order With CSS Depending on Device-Width
Why Does the Outer ≪Div≫ Here Not Completely Surround the Inner ≪Div≫
Show an Image Preview Before Upload
Implement an Input With a Mask
Html5 Best Practices; Section/Header/Aside/Article Elements
How to Expand Floated Child Div'S Height to Parent'S Height
Minimum and Maximum Value of Z-Index
How to Get HTML 5 Input Type="Date" Working in Firefox And/Or Ie 10
How Does Jquery Work When There Are Multiple Elements With the Same Id Value
Why Is Vertical-Align: Middle Not Working on My Span or Div
Css: Control Space Between Bullet and ≪Li≫
How to Use Google Chrome 11'S Upload Folder Feature in My Own Code
Background: Fixed No Repeat Not Working on Mobile
Nesting Optgroups in a Dropdownlist/Select
Should I Specify Height and Width Attributes For My Imgs in Html