Make Iframe to fit 100 of container s remaining height

Question

I want to design a web page with a banner and an iframe  I hope the iframe can fill all the remaining page height and be resized automatically as the browser is resizing  Is it possible to get it done without writing JavaScript code  only with CSS  I tried to set height 100  on iframe  the result is quite close but the iframe tried to fill the whole page height  including the 30px height of banner div element  so I got unnecessary vertical scrollbar  It s not perfect  I tried CSS margin  padding attribute on DIV to occupy the whole remaining height of a web page successfully  but the trick didn t work on iframe   x000D   x000D    lt body gt       lt div style  width 100   height 30px  background-color  cccccc   gt Banner lt  div gt       lt iframe src  http    www google com tw  style  width 100   height 100    gt  lt  iframe gt   lt  body gt  x000D   x000D   x000D

User · Answer

Here are a few modern approaches      Approach 1 - Combination of viewport relative units   calc     The expression calc 100vh - 30px  represents the remaining height  Where 100vh is the height of the browser and the usage of calc   effectively displaces the height of the other element   Example Here   x000D   x000D  body   x000D      margin  0  x000D    x000D   banner   x000D      background   f00  x000D      height  30px  x000D    x000D  iframe   x000D      display  block  x000D      background   000  x000D      border  none  x000D      height  calc 100vh - 30px   x000D      width  100   x000D    x000D   lt div class  banner  gt  lt  div gt  x000D   lt iframe gt  lt  iframe gt  x000D   x000D   x000D    Support for calc   here  support for viewport relative units here       Approach 2 - Flexbox approach  Example Here  Set the display of the common parent element to flex  along with flex-direction  column  assuming you want the elements to stack on top of each other   Then set flex-grow  1 on the child iframe element in order for it to fill the remaining space    x000D   x000D  body   x000D      margin  0  x000D    x000D   parent   x000D      display  flex  x000D      flex-direction  column  x000D      min-height  100vh  x000D    x000D   parent  banner   x000D      background   f00  x000D      width  100   x000D      height  30px  x000D    x000D   parent iframe   x000D      background   000  x000D      border  none  x000D      flex-grow  1  x000D    x000D   lt div class  parent  gt  x000D       lt div class  banner  gt  lt  div gt  x000D       lt iframe gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Since this approach has less support1  I d suggest going with the aforementioned approach     1Though it seems to work in Chrome FF  it doesn t work in IE  the first method works in all current browsers

User · Answer

Similar answer of  MichAdel  but I m using JQuery and more elegant    lt script type  text javascript  gt        document  ready function             var  iframe       iframe id   0               Calculate the total offset top of given jquery element         function totalOffsetTop  elem                return  elem offsetTop     elem offsetParent   totalOffsetTop  elem offsetParent    0                      function resizeIframe                 var height   window innerHeight    document body clientHeight    document documentElement clientHeight              height -  totalOffsetTop  iframe                iframe height   Math max 0  height     px                       iframe onload   resizeIframe            window onresize   resizeIframe           lt  script gt    iframe id is the ID of the iframe tag

User · Answer

you cant set the iframe height in   because your parent body height is not 100  so make the parent height as 100  and then apply iframe height 100   For eg   lt html gt   lt head gt   lt style gt  html body height 100    lt  style gt    lt  head gt   lt body gt   lt iframe src  http   www quasarinfosystem com  height  100   width  100    gt  lt  iframe gt   lt  body gt   lt  html gt

User · Answer

Having tried the css route for a while  I ended up writing something fairly basic in jQuery that did the job for me   function iframeHeight         var newHeight    j window  height        var buffer   180         space required for any other elements on the page      var newIframeHeight   newHeight - buffer       j  iframe   css  height  newIframeHeight        this will aply to all iframes on the page  so you may want to make your jquery selector more specific        When DOM ready   function         window onresize   iframeHeight      Tested in IE8  Chrome  Firefox 3 6

User · Answer

It will work with below mentioned code   lt iframe src  http    www google com tw style  position  absolute  height  100   border  none  gt  lt  iframe gt

User · Answer

You can do this with html css like this    lt body gt       lt div style  width 100   height 30px  background-color  cccccc   gt Banner lt  div gt       lt iframe src  http    www google com tw  style  position fixed top 30px bottom 0px width 100    gt  lt  iframe gt   lt  body gt

User · Answer

It s right  you are showing an iframe with 100  height respect to its container  the body   Try this    lt body gt     lt div style  width 100   height 30px  background-color  cccccc   gt Banner lt  div gt     lt div style  width 100   height 90   background-color transparent   gt       lt iframe src  http    www google com tw  style  width 100   height 100    gt       lt  iframe gt      lt  div gt   lt  body gt    Of course  change the height of the second div to the height you want

User · Answer

I think you have a conceptual problem here  To say  I tried set height 100  on iframe  the result is quite close but the iframe tried to fill the whole page   well  when has  100   not been equal to  whole    You have asked the iframe to fill the entire height of its container  which is the body  but unfortunately it has a block level sibling in the  lt div gt  above which you ve asked to be 30px big  So the parent container total is now being asked to size to 100    30px   100   Hence scrollbars   What I think you mean is that you would like the iframe to consume what s left like frames and table cells can  i e  height      IIRC this doesn t exist   Unfortunately to the best of my knowledge there is no way to effectively mix calculate subtract absolute and relative units either  so I think you re reduced to two options     Absolutely position your div  which will take it out of the container so the iframe alone will consume it s containers height  This leaves you with all manner of other problems though  but perhaps for what you re doing opacity or alignment would be ok  Alternatively you need to specify a   height for the div and reduce the height of the iframe by that much  If the absolute height is really that important you ll need to apply that to a child element of the div instead

User · Answer

Another alternative using vh  lt iframe src     style  quot display block  border none  height 100vh  width 100   quot  gt  lt  iframe gt

User · Answer

We use a JavaScript to solve this problem  here is the source     var buffer   20    scroll bar buffer var iframe   document getElementById  ifm     function pageY elem        return elem offsetParent    elem offsetTop   pageY elem offsetParent     elem offsetTop     function resizeIframe         var height   document documentElement clientHeight      height -  pageY document getElementById  ifm     buffer       height    height  lt  0    0   height      document getElementById  ifm   style height   height    px          onload doesn t work with IE8 and older  if  iframe attachEvent        iframe attachEvent  onload   resizeIframe     else       iframe onload resizeIframe     window onresize   resizeIframe      Note  ifm is the iframe ID  pageY   was created by John Resig  the author of jQuery

User · Answer

It will work with below mentioned code   lt iframe src  http    www google com tw style  position  absolute  height  100   border  none  gt  lt  iframe gt

User · Answer

or you can go old-school and use a frameset perhaps    lt frameset rows  30    gt     lt frame src  banner swf   gt     lt frame src  inner html    gt   lt  frameset gt

User · Answer

We use a JavaScript to solve this problem  here is the source     var buffer   20    scroll bar buffer var iframe   document getElementById  ifm     function pageY elem        return elem offsetParent    elem offsetTop   pageY elem offsetParent     elem offsetTop     function resizeIframe         var height   document documentElement clientHeight      height -  pageY document getElementById  ifm     buffer       height    height  lt  0    0   height      document getElementById  ifm   style height   height    px          onload doesn t work with IE8 and older  if  iframe attachEvent        iframe attachEvent  onload   resizeIframe     else       iframe onload resizeIframe     window onresize   resizeIframe      Note  ifm is the iframe ID  pageY   was created by John Resig  the author of jQuery

User · Answer

It s right  you are showing an iframe with 100  height respect to its container  the body   Try this    lt body gt     lt div style  width 100   height 30px  background-color  cccccc   gt Banner lt  div gt     lt div style  width 100   height 90   background-color transparent   gt       lt iframe src  http    www google com tw  style  width 100   height 100    gt       lt  iframe gt      lt  div gt   lt  body gt    Of course  change the height of the second div to the height you want

User · Answer

MichAdel code works for me but I made some minor modification to get it work properly   function pageY elem        return elem offsetParent    elem offsetTop   pageY elem offsetParent     elem offsetTop    var buffer   10    scroll bar buffer function resizeIframe         var height   window innerHeight    document body clientHeight    document documentElement clientHeight      height -  pageY document getElementById  ifm     buffer       height    height  lt  0    0   height      document getElementById  ifm   style height   height    px     window onresize   resizeIframe  window onload   resizeIframe

User · Answer

We use a JavaScript to solve this problem  here is the source     var buffer   20    scroll bar buffer var iframe   document getElementById  ifm     function pageY elem        return elem offsetParent    elem offsetTop   pageY elem offsetParent     elem offsetTop     function resizeIframe         var height   document documentElement clientHeight      height -  pageY document getElementById  ifm     buffer       height    height  lt  0    0   height      document getElementById  ifm   style height   height    px          onload doesn t work with IE8 and older  if  iframe attachEvent        iframe attachEvent  onload   resizeIframe     else       iframe onload resizeIframe     window onresize   resizeIframe      Note  ifm is the iframe ID  pageY   was created by John Resig  the author of jQuery

User · Answer

While I agree JS seems a better option  I have a somewhat CSS only working solution  The downside of it is that if you have to add content to your iframe html document frequently  you would have to adapt one percentage trough time   Solution   Try not specifying any height for BOTH your html documents   html  body  section  main-div      then only code this    main-div  height 100     iframe  height 300      note  the div should be your main section   This should relatively work  the iframe does exactly calculates 300  of the visible window height  If you html content from the 2nd document  in the iframe  is smaller in height than 3 times your browser height  it works  If you don t need to add content frequently to that document this is a permanent solution and you could just find your own   needed according to your content height   This works because it prevents the 2nd html document  the one embed  to inherit its height frome the parent html document  It prevents it because we didn t specify an height for both of them  When we give a   to the child it looks for its parent  if not  it takes its content height  And only if the other containers aren t given heights  from what I tried

User · Answer

It s right  you are showing an iframe with 100  height respect to its container  the body   Try this    lt body gt     lt div style  width 100   height 30px  background-color  cccccc   gt Banner lt  div gt     lt div style  width 100   height 90   background-color transparent   gt       lt iframe src  http    www google com tw  style  width 100   height 100    gt       lt  iframe gt      lt  div gt   lt  body gt    Of course  change the height of the second div to the height you want

User · Answer

MichAdel code works for me but I made some minor modification to get it work properly   function pageY elem        return elem offsetParent    elem offsetTop   pageY elem offsetParent     elem offsetTop    var buffer   10    scroll bar buffer function resizeIframe         var height   window innerHeight    document body clientHeight    document documentElement clientHeight      height -  pageY document getElementById  ifm     buffer       height    height  lt  0    0   height      document getElementById  ifm   style height   height    px     window onresize   resizeIframe  window onload   resizeIframe

User · Answer

New in HTML5  Use calc  on height    lt html style  width 100   height 100   margin  0px  padding  0px   gt   lt body style  width 100   height 100   margin  0px  padding  0px   gt   lt div style  width 100   height 30px  background-color  cccccc   gt Banner lt  div gt   lt iframe src  http   www google com tw  style  width 100   height  calc 100  - 30px    gt  lt  iframe gt   lt  body gt   lt  html gt

User · Answer

Why not do this  with minor adjustment for body padding margins    lt script gt    var oF   document getElementById  iframe1      oF style height   document body clientHeight - oF offsetTop - 0   lt  script gt

User · Answer

Having tried the css route for a while  I ended up writing something fairly basic in jQuery that did the job for me   function iframeHeight         var newHeight    j window  height        var buffer   180         space required for any other elements on the page      var newIframeHeight   newHeight - buffer       j  iframe   css  height  newIframeHeight        this will aply to all iframes on the page  so you may want to make your jquery selector more specific        When DOM ready   function         window onresize   iframeHeight      Tested in IE8  Chrome  Firefox 3 6

User · Answer

You can do this by measuring the body size on load resize events and setting the height to the  full height - banner height    Note that currently in IE8 Beta2 you can t do this onresize as that event is currently broken in IE8 Beta2

User · Answer

Another way to do that would be to use the position  fixed  on parent node  If I am not mistaken  position  fixed  ties the element to viewport  thus  once you give this node width  100   and height  100   properties  it will span over entire screen  From this point on  you can put  lt iframe gt  tag inside it and span it over remaining space  both in width and in height  with simple width  100   height  100   CSS instruction   Example code     x000D   x000D      body   x000D          margin  0px  x000D          padding  0px  x000D        x000D   x000D         iframe s parent node    x000D      div root   x000D          position  fixed  x000D          width  100   x000D          height  100   x000D        x000D   x000D         iframe itself    x000D      div root  gt  iframe   x000D          display  block  x000D          width  100   x000D          height  100   x000D          border  none  x000D        x000D      lt html gt  x000D           lt head gt  x000D               lt title gt iframe Test lt  title gt  x000D               lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt  x000D           lt  head gt  x000D           lt body gt  x000D               lt div id  root  gt  x000D                   lt iframe src  http   stackoverflow com   gt  x000D                      Your browser does not support inline frames  x000D                   lt  iframe gt  x000D               lt  div gt  x000D           lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

Update in 2019  TL DR  Today the best option is the last one in this answer - flexbox  Everything supports it nicely and has for years  Go for that and don t look back  The rest of this answer is left for historical reasons     The trick is to understand what the 100  is taken of  Reading CSS specs can help you there   To make a long story short - there is such a thing as  containing block  - which is not necessary the parent element  Simply said  it is the first element up the hierarchy that has position relative or position absolute  Or the body element itself if there is nothing else  So  when you say  width  100    it checks the width of the  containing block  and sets the width of your element to the same size  If there was something else there  then you might get contents of a  containing block  that are larger than itself  thus  overflowing     Height works the same way  With one exception  You can t get height to 100  of the browser window  The very top level element  against which 100  can be calculated  is the body  or html  not sure  element  and that stretches just enough to contain its contents  Specifying height 100  on it will have no effect  because it has no  parent element  against which to measure 100   Window itself doesn t count      To make something stretch exactly 100  of the window  you have two choices  Use JavaScript Don t use DOCTYPE  This is not a good practice  but it puts the browsers in  quirks mode   in which you can do height  100   on elements and it will stretch them to the window size  Do note  that the rest of your page will probably have to be changed too to accommodate for the DOCTYPE changes   Update  I m not sure if I wasn t wrong already when I posted this  but this certainly is outdated now  Today you can do this in your stylesheet  html  body   height  100    and it will actually stretch to the whole of your viewport  Even with a DOCTYPE  min-height  100  could also be useful  depending on your situation   And I wouldn t advise anyone to make a quirks-mode document anymore either  because it causes way more headaches than solves them  Every browser has a different quirks-mode  so getting your page to look consistently across browsers becomes two orders of magnitude more difficult  Use a DOCTYPE  Always  Preferably the HTML5 one -  lt  DOCTYPE html gt   It s easy to remember and works like a charm in all browsers  even the 10 years old ones   The only exception is when you have to support something like IE5 or something  If you re there  then you re on your own anyway  Those ancient browsers are nothing like the browsers today  and little advice that is given here will help you with them  On the bright side  if you re there  you probably just have to support ONE kind of browser  which gets rid of the compatibility problems   Good luck   Update 2  Hey  it s been a long time  6 years later  new options are on the scene  I just had a discussion in the comments below  here are more tricks for you that work in today s browsers   Option 1 - absolute positioning  Nice and clean for when you know the precise height of the first part    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   first-row  position  absolute top  0  left  0  right  0  height  100px  background-color  lime   x000D   second-row  position  absolute  top  100px  left  0  right  0  bottom  0  background-color  red   x000D   second-row iframe  display  block  width  100   height  100   border  none   x000D   lt div class  first-row  gt  x000D     lt p gt Some text lt  p gt  x000D     lt p gt And some more text lt  p gt  x000D   lt  div gt  x000D   lt div class  second-row  gt  x000D     lt iframe src  https   jsfiddle net about  gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the second-row container is needed because bottom  0 and right  0 doesn t work on iframes for some reason  Something to do with in being a  replaced  element  But width  100  and height  100  works just fine  display  block is needed because it s an inline element by default and whitespace starts creating weird overflows otherwise   Option 2 - tables  Works when you don t know the height of the first part  You can use either actual  lt table gt  tags or do it the fancy way with display  table  I ll go for the latter because it seems to be in fashion these days    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   row-container  display  table  empty-cells  show  border-collapse  collapse  width  100   height  100    x000D   first-row  display  table-row  overflow  auto  background-color  lime   x000D   second-row  display  table-row  height  100   background-color  red  overflow  hidden   x000D   second-row iframe  width  100   height  100   border  none  margin  0  padding  0  display  block   x000D   lt div class  row-container  gt  x000D     lt div class  first-row  gt  x000D       lt p gt Some text lt  p gt  x000D       lt p gt And some more text lt  p gt  x000D     lt  div gt  x000D     lt div class  second-row  gt  x000D       lt iframe src  https   jsfiddle net about  gt  lt  iframe gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the overflow  auto makes sure that the row always includes all of its contents  Otherwise floating elements can sometimes overflow  The height  100  on the second row makes sure it expands as much as it can squeezing the first row as small as it gets   Option 3 - flexbox  The cleanest one of them all  but with a less than stellar browser support  IE10 will need -ms- prefixes for the flexbox properties  and anything less will not support it at all    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   row-container  display  flex  width  100   height  100   flex-direction  column  background-color  blue  overflow  hidden   x000D   first-row  background-color  lime    x000D   second-row   flex-grow  1  border  none  margin  0  padding  0    x000D   lt div class  row-container  gt  x000D     lt div class  first-row  gt  x000D       lt p gt Some text lt  p gt  x000D       lt p gt And some more text lt  p gt  x000D     lt  div gt  x000D     lt iframe src  https   jsfiddle net about  class  second-row  gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the overflow  hidden is because the iframe still generates some sort of overflow even with display  block in this case  It isn t visible in the fullscreen view or the snippet editor  but the small preview window gets an extra scrollbar  No idea what that is  iframes are weird

User · Answer

I used display table to fix a similar issue  It almost works for this  leaving a small vertical scroll bar  If you re trying to populate that flexible column with something other than an iframe it works fine  not   Take the following HTML   lt body gt     lt div class  outer  gt       lt div class  banner  gt Banner lt  div gt       lt div class  iframe-container  gt         lt iframe src  http    www google com tw  style  width 100   height 100  border 0   gt  lt  iframe gt       lt  div gt     lt  div gt   lt  body gt    Change the outer div to use display table and ensure it has a width and height set    outer     display  table    height  100     width  100       Make the banner a table-row and set its height to whatever your preference is    banner     display  table-row    height  30px    background   eee      Add an extra div around your iframe  or whatever content you need  and make it a table-row with height set to 100   setting its height is critical if you want to embed an iframe to fill the height    iframe-container     display  table-row    height  100       Below is a jsfiddle showing it at work  without an iframe because that doesn t seem to work in the fiddle   https   jsfiddle net yufceynk 1

User · Answer

Why not do this  with minor adjustment for body padding margins    lt script gt    var oF   document getElementById  iframe1      oF style height   document body clientHeight - oF offsetTop - 0   lt  script gt

User · Answer

I think you have a conceptual problem here  To say  I tried set height 100  on iframe  the result is quite close but the iframe tried to fill the whole page   well  when has  100   not been equal to  whole    You have asked the iframe to fill the entire height of its container  which is the body  but unfortunately it has a block level sibling in the  lt div gt  above which you ve asked to be 30px big  So the parent container total is now being asked to size to 100    30px   100   Hence scrollbars   What I think you mean is that you would like the iframe to consume what s left like frames and table cells can  i e  height      IIRC this doesn t exist   Unfortunately to the best of my knowledge there is no way to effectively mix calculate subtract absolute and relative units either  so I think you re reduced to two options     Absolutely position your div  which will take it out of the container so the iframe alone will consume it s containers height  This leaves you with all manner of other problems though  but perhaps for what you re doing opacity or alignment would be ok  Alternatively you need to specify a   height for the div and reduce the height of the iframe by that much  If the absolute height is really that important you ll need to apply that to a child element of the div instead

User · Answer

You can do this by measuring the body size on load resize events and setting the height to the  full height - banner height    Note that currently in IE8 Beta2 you can t do this onresize as that event is currently broken in IE8 Beta2

User · Answer

You can do this by measuring the body size on load resize events and setting the height to the  full height - banner height    Note that currently in IE8 Beta2 you can t do this onresize as that event is currently broken in IE8 Beta2

User · Answer

A simple jQuery solution  Use this in a script inside the iframed page    function         if window    top           var autoIframeHeight   function                var url   location href                top jQuery find  iframe src     url         css  height      body   height   4                       window  on  resize  autoIframeHeight           autoIframeHeight

User · Answer

I think the best way to achieve this scenario using css position  set position relative to your parent div and position absolute to your iframe    x000D   x000D   container  x000D    width 100   x000D    position relative  x000D    height 500px  x000D    x000D   x000D  iframe  x000D    position absolute  x000D    width 100   x000D    height 100   x000D    x000D   lt div class  container  gt  x000D     lt iframe src  http   www w3schools com  gt  x000D     lt p gt Your browser does not support iframes  lt  p gt  x000D    lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    for other padding and margin issue now a days css3 calc   is very advanced and mostly compatible to all browser as well   check calc

User · Answer

try the following    lt iframe name    src    width  100   style  height  100em   gt    it worked for me

User · Answer

If you have access to the content of the iframe that will be loaded  you can tell its parent to resize whenever it resizes          window  resize function               parent document               find  iframe                css  height      body   css  height                    trigger  resize      If you have more than one iframe on the page  you may need to use id s or other clever methods to enhance  find  iframe   so that you re selecting the correct one

User · Answer

Update in 2019  TL DR  Today the best option is the last one in this answer - flexbox  Everything supports it nicely and has for years  Go for that and don t look back  The rest of this answer is left for historical reasons     The trick is to understand what the 100  is taken of  Reading CSS specs can help you there   To make a long story short - there is such a thing as  containing block  - which is not necessary the parent element  Simply said  it is the first element up the hierarchy that has position relative or position absolute  Or the body element itself if there is nothing else  So  when you say  width  100    it checks the width of the  containing block  and sets the width of your element to the same size  If there was something else there  then you might get contents of a  containing block  that are larger than itself  thus  overflowing     Height works the same way  With one exception  You can t get height to 100  of the browser window  The very top level element  against which 100  can be calculated  is the body  or html  not sure  element  and that stretches just enough to contain its contents  Specifying height 100  on it will have no effect  because it has no  parent element  against which to measure 100   Window itself doesn t count      To make something stretch exactly 100  of the window  you have two choices  Use JavaScript Don t use DOCTYPE  This is not a good practice  but it puts the browsers in  quirks mode   in which you can do height  100   on elements and it will stretch them to the window size  Do note  that the rest of your page will probably have to be changed too to accommodate for the DOCTYPE changes   Update  I m not sure if I wasn t wrong already when I posted this  but this certainly is outdated now  Today you can do this in your stylesheet  html  body   height  100    and it will actually stretch to the whole of your viewport  Even with a DOCTYPE  min-height  100  could also be useful  depending on your situation   And I wouldn t advise anyone to make a quirks-mode document anymore either  because it causes way more headaches than solves them  Every browser has a different quirks-mode  so getting your page to look consistently across browsers becomes two orders of magnitude more difficult  Use a DOCTYPE  Always  Preferably the HTML5 one -  lt  DOCTYPE html gt   It s easy to remember and works like a charm in all browsers  even the 10 years old ones   The only exception is when you have to support something like IE5 or something  If you re there  then you re on your own anyway  Those ancient browsers are nothing like the browsers today  and little advice that is given here will help you with them  On the bright side  if you re there  you probably just have to support ONE kind of browser  which gets rid of the compatibility problems   Good luck   Update 2  Hey  it s been a long time  6 years later  new options are on the scene  I just had a discussion in the comments below  here are more tricks for you that work in today s browsers   Option 1 - absolute positioning  Nice and clean for when you know the precise height of the first part    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   first-row  position  absolute top  0  left  0  right  0  height  100px  background-color  lime   x000D   second-row  position  absolute  top  100px  left  0  right  0  bottom  0  background-color  red   x000D   second-row iframe  display  block  width  100   height  100   border  none   x000D   lt div class  first-row  gt  x000D     lt p gt Some text lt  p gt  x000D     lt p gt And some more text lt  p gt  x000D   lt  div gt  x000D   lt div class  second-row  gt  x000D     lt iframe src  https   jsfiddle net about  gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the second-row container is needed because bottom  0 and right  0 doesn t work on iframes for some reason  Something to do with in being a  replaced  element  But width  100  and height  100  works just fine  display  block is needed because it s an inline element by default and whitespace starts creating weird overflows otherwise   Option 2 - tables  Works when you don t know the height of the first part  You can use either actual  lt table gt  tags or do it the fancy way with display  table  I ll go for the latter because it seems to be in fashion these days    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   row-container  display  table  empty-cells  show  border-collapse  collapse  width  100   height  100    x000D   first-row  display  table-row  overflow  auto  background-color  lime   x000D   second-row  display  table-row  height  100   background-color  red  overflow  hidden   x000D   second-row iframe  width  100   height  100   border  none  margin  0  padding  0  display  block   x000D   lt div class  row-container  gt  x000D     lt div class  first-row  gt  x000D       lt p gt Some text lt  p gt  x000D       lt p gt And some more text lt  p gt  x000D     lt  div gt  x000D     lt div class  second-row  gt  x000D       lt iframe src  https   jsfiddle net about  gt  lt  iframe gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the overflow  auto makes sure that the row always includes all of its contents  Otherwise floating elements can sometimes overflow  The height  100  on the second row makes sure it expands as much as it can squeezing the first row as small as it gets   Option 3 - flexbox  The cleanest one of them all  but with a less than stellar browser support  IE10 will need -ms- prefixes for the flexbox properties  and anything less will not support it at all    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   row-container  display  flex  width  100   height  100   flex-direction  column  background-color  blue  overflow  hidden   x000D   first-row  background-color  lime    x000D   second-row   flex-grow  1  border  none  margin  0  padding  0    x000D   lt div class  row-container  gt  x000D     lt div class  first-row  gt  x000D       lt p gt Some text lt  p gt  x000D       lt p gt And some more text lt  p gt  x000D     lt  div gt  x000D     lt iframe src  https   jsfiddle net about  class  second-row  gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the overflow  hidden is because the iframe still generates some sort of overflow even with display  block in this case  It isn t visible in the fullscreen view or the snippet editor  but the small preview window gets an extra scrollbar  No idea what that is  iframes are weird

User · Answer

Maybe this has been answered already  a few answers above are  correct  ways of doing this   but I thought I d just add my solution as well   Our iFrame is loaded within a div  hence I needed something else then window height  And seeing our project already relies heavily on jQuery  I find this to be the most elegant solution      iframe   height     middle   height       Where of course   middle  is the id of the div  The only extra thing you ll need to do is recall this size change whenever the user resizes the window     window  resize function            iframe   height     middle   height

User · Answer

Maybe this has been answered already  a few answers above are  correct  ways of doing this   but I thought I d just add my solution as well   Our iFrame is loaded within a div  hence I needed something else then window height  And seeing our project already relies heavily on jQuery  I find this to be the most elegant solution      iframe   height     middle   height       Where of course   middle  is the id of the div  The only extra thing you ll need to do is recall this size change whenever the user resizes the window     window  resize function            iframe   height     middle   height

User · Answer

or you can go old-school and use a frameset perhaps    lt frameset rows  30    gt     lt frame src  banner swf   gt     lt frame src  inner html    gt   lt  frameset gt

User · Answer

I think the best way to achieve this scenario using css position  set position relative to your parent div and position absolute to your iframe    x000D   x000D   container  x000D    width 100   x000D    position relative  x000D    height 500px  x000D    x000D   x000D  iframe  x000D    position absolute  x000D    width 100   x000D    height 100   x000D    x000D   lt div class  container  gt  x000D     lt iframe src  http   www w3schools com  gt  x000D     lt p gt Your browser does not support iframes  lt  p gt  x000D    lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    for other padding and margin issue now a days css3 calc   is very advanced and mostly compatible to all browser as well   check calc

User · Answer

A simple jQuery solution  Use this in a script inside the iframed page    function         if window    top           var autoIframeHeight   function                var url   location href                top jQuery find  iframe src     url         css  height      body   height   4                       window  on  resize  autoIframeHeight           autoIframeHeight

User · Answer

I think you have a conceptual problem here  To say  I tried set height 100  on iframe  the result is quite close but the iframe tried to fill the whole page   well  when has  100   not been equal to  whole    You have asked the iframe to fill the entire height of its container  which is the body  but unfortunately it has a block level sibling in the  lt div gt  above which you ve asked to be 30px big  So the parent container total is now being asked to size to 100    30px   100   Hence scrollbars   What I think you mean is that you would like the iframe to consume what s left like frames and table cells can  i e  height      IIRC this doesn t exist   Unfortunately to the best of my knowledge there is no way to effectively mix calculate subtract absolute and relative units either  so I think you re reduced to two options     Absolutely position your div  which will take it out of the container so the iframe alone will consume it s containers height  This leaves you with all manner of other problems though  but perhaps for what you re doing opacity or alignment would be ok  Alternatively you need to specify a   height for the div and reduce the height of the iframe by that much  If the absolute height is really that important you ll need to apply that to a child element of the div instead

User · Answer

Here are a few modern approaches      Approach 1 - Combination of viewport relative units   calc     The expression calc 100vh - 30px  represents the remaining height  Where 100vh is the height of the browser and the usage of calc   effectively displaces the height of the other element   Example Here   x000D   x000D  body   x000D      margin  0  x000D    x000D   banner   x000D      background   f00  x000D      height  30px  x000D    x000D  iframe   x000D      display  block  x000D      background   000  x000D      border  none  x000D      height  calc 100vh - 30px   x000D      width  100   x000D    x000D   lt div class  banner  gt  lt  div gt  x000D   lt iframe gt  lt  iframe gt  x000D   x000D   x000D    Support for calc   here  support for viewport relative units here       Approach 2 - Flexbox approach  Example Here  Set the display of the common parent element to flex  along with flex-direction  column  assuming you want the elements to stack on top of each other   Then set flex-grow  1 on the child iframe element in order for it to fill the remaining space    x000D   x000D  body   x000D      margin  0  x000D    x000D   parent   x000D      display  flex  x000D      flex-direction  column  x000D      min-height  100vh  x000D    x000D   parent  banner   x000D      background   f00  x000D      width  100   x000D      height  30px  x000D    x000D   parent iframe   x000D      background   000  x000D      border  none  x000D      flex-grow  1  x000D    x000D   lt div class  parent  gt  x000D       lt div class  banner  gt  lt  div gt  x000D       lt iframe gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Since this approach has less support1  I d suggest going with the aforementioned approach     1Though it seems to work in Chrome FF  it doesn t work in IE  the first method works in all current browsers

User · Answer

New in HTML5  Use calc  on height    lt html style  width 100   height 100   margin  0px  padding  0px   gt   lt body style  width 100   height 100   margin  0px  padding  0px   gt   lt div style  width 100   height 30px  background-color  cccccc   gt Banner lt  div gt   lt iframe src  http   www google com tw  style  width 100   height  calc 100  - 30px    gt  lt  iframe gt   lt  body gt   lt  html gt

User · Answer

Another alternative using vh  lt iframe src     style  quot display block  border none  height 100vh  width 100   quot  gt  lt  iframe gt

User · Answer

You can do it with DOCTYPE  but you have to use table  Check this out    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt   lt style gt    margin 0 padding 0  html  body  height 100  width 100  overflow hidden  table  height 100  width 100  table-layout static border-collapse collapse  iframe  height 100  width 100     header  border-bottom 1px solid  000   content  height 100    lt  style gt   lt  head gt   lt body gt   lt table gt       lt tr gt  lt td class  header  gt  lt div gt  lt h1 gt Header lt  h1 gt  lt  div gt  lt  td gt  lt  tr gt       lt tr gt  lt td class  content  gt           lt iframe src  http   google com   frameborder  0  gt  lt  iframe gt  lt  td gt  lt  tr gt   lt  table gt   lt  body gt   lt  html gt

User · Answer

The  seamless  attribute is a new standard aiming to solve this issue   http   www w3schools com tags att iframe seamless asp  When assigning this attribute it will remove borders and scroll bars and size the iframe to its content size  though it is only supported in Chrome and latest Safari  more on this here   HTML5 iFrame Seamless Attribute

User · Answer

Similar answer of  MichAdel  but I m using JQuery and more elegant    lt script type  text javascript  gt        document  ready function             var  iframe       iframe id   0               Calculate the total offset top of given jquery element         function totalOffsetTop  elem                return  elem offsetTop     elem offsetParent   totalOffsetTop  elem offsetParent    0                      function resizeIframe                 var height   window innerHeight    document body clientHeight    document documentElement clientHeight              height -  totalOffsetTop  iframe                iframe height   Math max 0  height     px                       iframe onload   resizeIframe            window onresize   resizeIframe           lt  script gt    iframe id is the ID of the iframe tag

User · Answer

Another way to do that would be to use the position  fixed  on parent node  If I am not mistaken  position  fixed  ties the element to viewport  thus  once you give this node width  100   and height  100   properties  it will span over entire screen  From this point on  you can put  lt iframe gt  tag inside it and span it over remaining space  both in width and in height  with simple width  100   height  100   CSS instruction   Example code     x000D   x000D      body   x000D          margin  0px  x000D          padding  0px  x000D        x000D   x000D         iframe s parent node    x000D      div root   x000D          position  fixed  x000D          width  100   x000D          height  100   x000D        x000D   x000D         iframe itself    x000D      div root  gt  iframe   x000D          display  block  x000D          width  100   x000D          height  100   x000D          border  none  x000D        x000D      lt html gt  x000D           lt head gt  x000D               lt title gt iframe Test lt  title gt  x000D               lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt  x000D           lt  head gt  x000D           lt body gt  x000D               lt div id  root  gt  x000D                   lt iframe src  http   stackoverflow com   gt  x000D                      Your browser does not support inline frames  x000D                   lt  iframe gt  x000D               lt  div gt  x000D           lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

You can do it with DOCTYPE  but you have to use table  Check this out    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt   lt style gt    margin 0 padding 0  html  body  height 100  width 100  overflow hidden  table  height 100  width 100  table-layout static border-collapse collapse  iframe  height 100  width 100     header  border-bottom 1px solid  000   content  height 100    lt  style gt   lt  head gt   lt body gt   lt table gt       lt tr gt  lt td class  header  gt  lt div gt  lt h1 gt Header lt  h1 gt  lt  div gt  lt  td gt  lt  tr gt       lt tr gt  lt td class  content  gt           lt iframe src  http   google com   frameborder  0  gt  lt  iframe gt  lt  td gt  lt  tr gt   lt  table gt   lt  body gt   lt  html gt

User · Answer

I used display table to fix a similar issue  It almost works for this  leaving a small vertical scroll bar  If you re trying to populate that flexible column with something other than an iframe it works fine  not   Take the following HTML   lt body gt     lt div class  outer  gt       lt div class  banner  gt Banner lt  div gt       lt div class  iframe-container  gt         lt iframe src  http    www google com tw  style  width 100   height 100  border 0   gt  lt  iframe gt       lt  div gt     lt  div gt   lt  body gt    Change the outer div to use display table and ensure it has a width and height set    outer     display  table    height  100     width  100       Make the banner a table-row and set its height to whatever your preference is    banner     display  table-row    height  30px    background   eee      Add an extra div around your iframe  or whatever content you need  and make it a table-row with height set to 100   setting its height is critical if you want to embed an iframe to fill the height    iframe-container     display  table-row    height  100       Below is a jsfiddle showing it at work  without an iframe because that doesn t seem to work in the fiddle   https   jsfiddle net yufceynk 1

User · Answer

you cant set the iframe height in   because your parent body height is not 100  so make the parent height as 100  and then apply iframe height 100   For eg   lt html gt   lt head gt   lt style gt  html body height 100    lt  style gt    lt  head gt   lt body gt   lt iframe src  http   www quasarinfosystem com  height  100   width  100    gt  lt  iframe gt   lt  body gt   lt  html gt

User · Answer

Here s what I did  I had the same problem and ended up searching the web for resources for hours    lt style type  text css  gt     html  body  div  iframe   margin 0  padding 0  height 100        iframe   position fixed  display block  width 100   border none     lt  style gt    I added this to the head section   Please note that my iframe is located inside the middle cell of a table that has 3 rows and 1 column

User · Answer

While I agree JS seems a better option  I have a somewhat CSS only working solution  The downside of it is that if you have to add content to your iframe html document frequently  you would have to adapt one percentage trough time   Solution   Try not specifying any height for BOTH your html documents   html  body  section  main-div      then only code this    main-div  height 100     iframe  height 300      note  the div should be your main section   This should relatively work  the iframe does exactly calculates 300  of the visible window height  If you html content from the 2nd document  in the iframe  is smaller in height than 3 times your browser height  it works  If you don t need to add content frequently to that document this is a permanent solution and you could just find your own   needed according to your content height   This works because it prevents the 2nd html document  the one embed  to inherit its height frome the parent html document  It prevents it because we didn t specify an height for both of them  When we give a   to the child it looks for its parent  if not  it takes its content height  And only if the other containers aren t given heights  from what I tried

User · Answer

If you have access to the content of the iframe that will be loaded  you can tell its parent to resize whenever it resizes          window  resize function               parent document               find  iframe                css  height      body   css  height                    trigger  resize      If you have more than one iframe on the page  you may need to use id s or other clever methods to enhance  find  iframe   so that you re selecting the correct one

User · Answer

You can do this with html css like this    lt body gt       lt div style  width 100   height 30px  background-color  cccccc   gt Banner lt  div gt       lt iframe src  http    www google com tw  style  position fixed top 30px bottom 0px width 100    gt  lt  iframe gt   lt  body gt

User · Answer

Update in 2019  TL DR  Today the best option is the last one in this answer - flexbox  Everything supports it nicely and has for years  Go for that and don t look back  The rest of this answer is left for historical reasons     The trick is to understand what the 100  is taken of  Reading CSS specs can help you there   To make a long story short - there is such a thing as  containing block  - which is not necessary the parent element  Simply said  it is the first element up the hierarchy that has position relative or position absolute  Or the body element itself if there is nothing else  So  when you say  width  100    it checks the width of the  containing block  and sets the width of your element to the same size  If there was something else there  then you might get contents of a  containing block  that are larger than itself  thus  overflowing     Height works the same way  With one exception  You can t get height to 100  of the browser window  The very top level element  against which 100  can be calculated  is the body  or html  not sure  element  and that stretches just enough to contain its contents  Specifying height 100  on it will have no effect  because it has no  parent element  against which to measure 100   Window itself doesn t count      To make something stretch exactly 100  of the window  you have two choices  Use JavaScript Don t use DOCTYPE  This is not a good practice  but it puts the browsers in  quirks mode   in which you can do height  100   on elements and it will stretch them to the window size  Do note  that the rest of your page will probably have to be changed too to accommodate for the DOCTYPE changes   Update  I m not sure if I wasn t wrong already when I posted this  but this certainly is outdated now  Today you can do this in your stylesheet  html  body   height  100    and it will actually stretch to the whole of your viewport  Even with a DOCTYPE  min-height  100  could also be useful  depending on your situation   And I wouldn t advise anyone to make a quirks-mode document anymore either  because it causes way more headaches than solves them  Every browser has a different quirks-mode  so getting your page to look consistently across browsers becomes two orders of magnitude more difficult  Use a DOCTYPE  Always  Preferably the HTML5 one -  lt  DOCTYPE html gt   It s easy to remember and works like a charm in all browsers  even the 10 years old ones   The only exception is when you have to support something like IE5 or something  If you re there  then you re on your own anyway  Those ancient browsers are nothing like the browsers today  and little advice that is given here will help you with them  On the bright side  if you re there  you probably just have to support ONE kind of browser  which gets rid of the compatibility problems   Good luck   Update 2  Hey  it s been a long time  6 years later  new options are on the scene  I just had a discussion in the comments below  here are more tricks for you that work in today s browsers   Option 1 - absolute positioning  Nice and clean for when you know the precise height of the first part    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   first-row  position  absolute top  0  left  0  right  0  height  100px  background-color  lime   x000D   second-row  position  absolute  top  100px  left  0  right  0  bottom  0  background-color  red   x000D   second-row iframe  display  block  width  100   height  100   border  none   x000D   lt div class  first-row  gt  x000D     lt p gt Some text lt  p gt  x000D     lt p gt And some more text lt  p gt  x000D   lt  div gt  x000D   lt div class  second-row  gt  x000D     lt iframe src  https   jsfiddle net about  gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the second-row container is needed because bottom  0 and right  0 doesn t work on iframes for some reason  Something to do with in being a  replaced  element  But width  100  and height  100  works just fine  display  block is needed because it s an inline element by default and whitespace starts creating weird overflows otherwise   Option 2 - tables  Works when you don t know the height of the first part  You can use either actual  lt table gt  tags or do it the fancy way with display  table  I ll go for the latter because it seems to be in fashion these days    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   row-container  display  table  empty-cells  show  border-collapse  collapse  width  100   height  100    x000D   first-row  display  table-row  overflow  auto  background-color  lime   x000D   second-row  display  table-row  height  100   background-color  red  overflow  hidden   x000D   second-row iframe  width  100   height  100   border  none  margin  0  padding  0  display  block   x000D   lt div class  row-container  gt  x000D     lt div class  first-row  gt  x000D       lt p gt Some text lt  p gt  x000D       lt p gt And some more text lt  p gt  x000D     lt  div gt  x000D     lt div class  second-row  gt  x000D       lt iframe src  https   jsfiddle net about  gt  lt  iframe gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the overflow  auto makes sure that the row always includes all of its contents  Otherwise floating elements can sometimes overflow  The height  100  on the second row makes sure it expands as much as it can squeezing the first row as small as it gets   Option 3 - flexbox  The cleanest one of them all  but with a less than stellar browser support  IE10 will need -ms- prefixes for the flexbox properties  and anything less will not support it at all    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   row-container  display  flex  width  100   height  100   flex-direction  column  background-color  blue  overflow  hidden   x000D   first-row  background-color  lime    x000D   second-row   flex-grow  1  border  none  margin  0  padding  0    x000D   lt div class  row-container  gt  x000D     lt div class  first-row  gt  x000D       lt p gt Some text lt  p gt  x000D       lt p gt And some more text lt  p gt  x000D     lt  div gt  x000D     lt iframe src  https   jsfiddle net about  class  second-row  gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the overflow  hidden is because the iframe still generates some sort of overflow even with display  block in this case  It isn t visible in the fullscreen view or the snippet editor  but the small preview window gets an extra scrollbar  No idea what that is  iframes are weird

User · Answer

You can do this by measuring the body size on load resize events and setting the height to the  full height - banner height    Note that currently in IE8 Beta2 you can t do this onresize as that event is currently broken in IE8 Beta2

User · Answer

Here s what I did  I had the same problem and ended up searching the web for resources for hours    lt style type  text css  gt     html  body  div  iframe   margin 0  padding 0  height 100        iframe   position fixed  display block  width 100   border none     lt  style gt    I added this to the head section   Please note that my iframe is located inside the middle cell of a table that has 3 rows and 1 column

User · Answer

Update in 2019  TL DR  Today the best option is the last one in this answer - flexbox  Everything supports it nicely and has for years  Go for that and don t look back  The rest of this answer is left for historical reasons     The trick is to understand what the 100  is taken of  Reading CSS specs can help you there   To make a long story short - there is such a thing as  containing block  - which is not necessary the parent element  Simply said  it is the first element up the hierarchy that has position relative or position absolute  Or the body element itself if there is nothing else  So  when you say  width  100    it checks the width of the  containing block  and sets the width of your element to the same size  If there was something else there  then you might get contents of a  containing block  that are larger than itself  thus  overflowing     Height works the same way  With one exception  You can t get height to 100  of the browser window  The very top level element  against which 100  can be calculated  is the body  or html  not sure  element  and that stretches just enough to contain its contents  Specifying height 100  on it will have no effect  because it has no  parent element  against which to measure 100   Window itself doesn t count      To make something stretch exactly 100  of the window  you have two choices  Use JavaScript Don t use DOCTYPE  This is not a good practice  but it puts the browsers in  quirks mode   in which you can do height  100   on elements and it will stretch them to the window size  Do note  that the rest of your page will probably have to be changed too to accommodate for the DOCTYPE changes   Update  I m not sure if I wasn t wrong already when I posted this  but this certainly is outdated now  Today you can do this in your stylesheet  html  body   height  100    and it will actually stretch to the whole of your viewport  Even with a DOCTYPE  min-height  100  could also be useful  depending on your situation   And I wouldn t advise anyone to make a quirks-mode document anymore either  because it causes way more headaches than solves them  Every browser has a different quirks-mode  so getting your page to look consistently across browsers becomes two orders of magnitude more difficult  Use a DOCTYPE  Always  Preferably the HTML5 one -  lt  DOCTYPE html gt   It s easy to remember and works like a charm in all browsers  even the 10 years old ones   The only exception is when you have to support something like IE5 or something  If you re there  then you re on your own anyway  Those ancient browsers are nothing like the browsers today  and little advice that is given here will help you with them  On the bright side  if you re there  you probably just have to support ONE kind of browser  which gets rid of the compatibility problems   Good luck   Update 2  Hey  it s been a long time  6 years later  new options are on the scene  I just had a discussion in the comments below  here are more tricks for you that work in today s browsers   Option 1 - absolute positioning  Nice and clean for when you know the precise height of the first part    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   first-row  position  absolute top  0  left  0  right  0  height  100px  background-color  lime   x000D   second-row  position  absolute  top  100px  left  0  right  0  bottom  0  background-color  red   x000D   second-row iframe  display  block  width  100   height  100   border  none   x000D   lt div class  first-row  gt  x000D     lt p gt Some text lt  p gt  x000D     lt p gt And some more text lt  p gt  x000D   lt  div gt  x000D   lt div class  second-row  gt  x000D     lt iframe src  https   jsfiddle net about  gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the second-row container is needed because bottom  0 and right  0 doesn t work on iframes for some reason  Something to do with in being a  replaced  element  But width  100  and height  100  works just fine  display  block is needed because it s an inline element by default and whitespace starts creating weird overflows otherwise   Option 2 - tables  Works when you don t know the height of the first part  You can use either actual  lt table gt  tags or do it the fancy way with display  table  I ll go for the latter because it seems to be in fashion these days    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   row-container  display  table  empty-cells  show  border-collapse  collapse  width  100   height  100    x000D   first-row  display  table-row  overflow  auto  background-color  lime   x000D   second-row  display  table-row  height  100   background-color  red  overflow  hidden   x000D   second-row iframe  width  100   height  100   border  none  margin  0  padding  0  display  block   x000D   lt div class  row-container  gt  x000D     lt div class  first-row  gt  x000D       lt p gt Some text lt  p gt  x000D       lt p gt And some more text lt  p gt  x000D     lt  div gt  x000D     lt div class  second-row  gt  x000D       lt iframe src  https   jsfiddle net about  gt  lt  iframe gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the overflow  auto makes sure that the row always includes all of its contents  Otherwise floating elements can sometimes overflow  The height  100  on the second row makes sure it expands as much as it can squeezing the first row as small as it gets   Option 3 - flexbox  The cleanest one of them all  but with a less than stellar browser support  IE10 will need -ms- prefixes for the flexbox properties  and anything less will not support it at all    x000D   x000D  body  html  width  100   height  100   margin  0  padding  0  x000D   row-container  display  flex  width  100   height  100   flex-direction  column  background-color  blue  overflow  hidden   x000D   first-row  background-color  lime    x000D   second-row   flex-grow  1  border  none  margin  0  padding  0    x000D   lt div class  row-container  gt  x000D     lt div class  first-row  gt  x000D       lt p gt Some text lt  p gt  x000D       lt p gt And some more text lt  p gt  x000D     lt  div gt  x000D     lt iframe src  https   jsfiddle net about  class  second-row  gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    Some notes - the overflow  hidden is because the iframe still generates some sort of overflow even with display  block in this case  It isn t visible in the fullscreen view or the snippet editor  but the small preview window gets an extra scrollbar  No idea what that is  iframes are weird

User · Answer

We use a JavaScript to solve this problem  here is the source     var buffer   20    scroll bar buffer var iframe   document getElementById  ifm     function pageY elem        return elem offsetParent    elem offsetTop   pageY elem offsetParent     elem offsetTop     function resizeIframe         var height   document documentElement clientHeight      height -  pageY document getElementById  ifm     buffer       height    height  lt  0    0   height      document getElementById  ifm   style height   height    px          onload doesn t work with IE8 and older  if  iframe attachEvent        iframe attachEvent  onload   resizeIframe     else       iframe onload resizeIframe     window onresize   resizeIframe      Note  ifm is the iframe ID  pageY   was created by John Resig  the author of jQuery

User · Answer

The  seamless  attribute is a new standard aiming to solve this issue   http   www w3schools com tags att iframe seamless asp  When assigning this attribute it will remove borders and scroll bars and size the iframe to its content size  though it is only supported in Chrome and latest Safari  more on this here   HTML5 iFrame Seamless Attribute

User · Answer

It s right  you are showing an iframe with 100  height respect to its container  the body   Try this    lt body gt     lt div style  width 100   height 30px  background-color  cccccc   gt Banner lt  div gt     lt div style  width 100   height 90   background-color transparent   gt       lt iframe src  http    www google com tw  style  width 100   height 100    gt       lt  iframe gt      lt  div gt   lt  body gt    Of course  change the height of the second div to the height you want

User · Answer

I think you have a conceptual problem here  To say  I tried set height 100  on iframe  the result is quite close but the iframe tried to fill the whole page   well  when has  100   not been equal to  whole    You have asked the iframe to fill the entire height of its container  which is the body  but unfortunately it has a block level sibling in the  lt div gt  above which you ve asked to be 30px big  So the parent container total is now being asked to size to 100    30px   100   Hence scrollbars   What I think you mean is that you would like the iframe to consume what s left like frames and table cells can  i e  height      IIRC this doesn t exist   Unfortunately to the best of my knowledge there is no way to effectively mix calculate subtract absolute and relative units either  so I think you re reduced to two options     Absolutely position your div  which will take it out of the container so the iframe alone will consume it s containers height  This leaves you with all manner of other problems though  but perhaps for what you re doing opacity or alignment would be ok  Alternatively you need to specify a   height for the div and reduce the height of the iframe by that much  If the absolute height is really that important you ll need to apply that to a child element of the div instead

User · Answer

try the following    lt iframe name    src    width  100   style  height  100em   gt    it worked for me

[html] Make Iframe to fit 100% of container's remaining height

Here are a few modern approaches:

Approach 1 - Combination of viewport relative units / `calc()`.

Approach 2 - Flexbox approach

Examples related to html

Examples related to css

Examples related to iframe

[html] Make Iframe to fit 100% of container's remaining height

Here are a few modern approaches:

Approach 1 - Combination of viewport relative units / calc().

Approach 2 - Flexbox approach

Examples related to html

Examples related to css

Examples related to iframe

Approach 1 - Combination of viewport relative units / `calc()`.