Full-screen iframe with a height of 100

Question

Is iframe height 100  supported in all browsers   I am using doctype as    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN      http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    In my iframe code  if I say    lt iframe src  xyz pdf  width  100   height  100     gt    I mean will it actually take the height of the remaining page  as there is another frame on top with fixed height of 50px  Is this supported in all major browsers  IE Firefox Safari     Also regarding scrollbars  even though I say scrolling  no   I can see disabled scrollbars in Firefox   How do I completely hide scrollbars and set the iframe height automatically

User · Answer

To get a full screen iframe without a scrollbar inside the iframe use the following css  Nothing more is required iframe              height  100vh              width  100vw                    iframe  -webkit-scrollbar           display  none

User · Answer

You could use frameset as the previous answer states but if you are insistent on using iFrames  the 2 following examples should work    lt body style  margin 0px padding 0px overflow hidden  gt       lt iframe src  http   www youraddress com  frameborder  0  style  overflow hidden height 100  width 100   height  100   width  100   gt  lt  iframe gt   lt  body gt    An alternative    lt body style  margin 0px padding 0px overflow hidden  gt       lt 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   gt  lt  iframe gt   lt  body gt    To hide scrolling with 2 alternatives as shown above    lt body style  margin 0px padding 0px overflow hidden  gt       lt iframe src  http   www youraddress com  frameborder  0  style  overflow hidden height 150  width 150   height  150   width  150   gt  lt  iframe gt   lt  body gt    Hack with the second example    lt body style  margin 0px padding 0px overflow hidden  gt       lt 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   gt  lt  iframe gt   lt  body gt    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

User · Answer

You first add css  html body  height 100       This will be the html     lt div style  position relative height 100  max-width 500px margin auto  gt       lt iframe src  xyz pdf  frameborder  0  width  100   height  100   gt       lt p gt Your browser does not support iframes  lt  p gt       lt  iframe gt       lt  div gt

User · Answer

1  Change your DOCTYPE to something less strict  Don t use XHTML  it s silly  Just use the HTML 5 doctype and you re good    lt  doctype html gt    2  You might need to make sure  depends on the browser  that the iframe s parent has a height  And its parent  And its parent  Etc   html  body   height  100

User · Answer

3 approaches for creating a fullscreen iframe      Approach 1 - Viewport-percentage lengths  In supported browsers  you can use viewport-percentage lengths such as height  100vh    Where 100vh represents the height of the viewport  and likewise 100vw represents the width   Example Here   x000D   x000D  body   x000D      margin  0                Reset default margin    x000D    x000D  iframe   x000D      display  block           iframes are inline by default    x000D      background   000  x000D      border  none             Reset default border    x000D      height  100vh            Viewport-relative units    x000D      width  100vw  x000D    x000D   lt iframe gt  lt  iframe gt  x000D   x000D   x000D        Approach 2 - Fixed positioning  This approach is fairly straight-forward  Just set the positioning of the fixed element and add a height width of 100    Example Here   x000D   x000D  iframe   x000D      position  fixed  x000D      background   000  x000D      border  none  x000D      top  0  right  0  x000D      bottom  0  left  0  x000D      width  100   x000D      height  100   x000D    x000D   lt iframe gt  lt  iframe gt  x000D   x000D   x000D        Approach 3  For this last method  just set the height of the body html iframe elements to 100    Example Here   x000D   x000D  html  body   x000D      height  100   x000D      margin  0             Reset default margin on the body element    x000D    x000D  iframe   x000D      display  block           iframes are inline by default    x000D      background   000  x000D      border  none             Reset default border    x000D      width  100   x000D      height  100   x000D    x000D   lt iframe gt  lt  iframe gt  x000D   x000D   x000D

User · Answer

Additional to the answer of Akshit Soota  it is importand to explicitly set the height of each parent element  also of the table and column if any    lt body style  margin  0px  padding 0px  height  100   overflow hidden    gt   lt form id  form1  runat  server  style   height  100   gt   lt div style   height  100   gt         lt table style  width  100   height  100   cellspacing  0   cellpadding  0  gt           lt tr gt               lt td valign  top  align  left  height  100   gt                   lt iframe style  overflow hidden height 100  width 100  margin  0px  padding 0px                            width  100   height  100   frameborder  0  scrolling  no                          src  http   www youraddress com   gt  lt  iframe gt                lt  td gt

User · Answer

This worked very nicely for me  only if iframe content comes from the same domain     lt script type  text javascript  gt  function calcHeight iframeElement       var the height   iframeElement contentWindow document body scrollHeight      iframeElement height   the height     lt  script gt   lt iframe src    page html  onLoad  calcHeight this    frameborder  0  scrolling  no  id  the iframe  width  100    gt  lt  iframe gt

User · Answer

You can can call a function which will calculate the iframe s body hieght when the iframe is loaded    lt script type  text javascript  gt      function iframeloaded           var lastHeight   0  curHeight   0   frame      iframe eq 0            curHeight    frame contents   find  body   height           if   curHeight    lastHeight                 frame css  height    lastHeight   curHeight     px                     lt  script gt    lt iframe onload  iframeloaded    src     gt

User · Answer

The following tested working   lt iframe style  width 100   height 100  position absolute top 0px left 0px right 0px bottom 0px  src  index html  frameborder  0  height  100   width  100   gt  lt  iframe gt

User · Answer

As per https   developer mozilla org en-US docs Web HTML Element iframe  percentage values are no longer allowed   But the following worked for me   lt iframe width  100   height  this height window innerHeight   style  border none  src    gt  lt  iframe gt    Though width 100  works  height 100  does not work  So window innerHeight has been used  You can also use css pixels for height   Working code  Link Working site  Link

User · Answer

Here is a concise code   It does relies on a jquery method to find the current window height  On load of iFrame it sets the height of the iframe be the same as the current window  Then to handle resizing of the page  the body tag has an onresize event handler which sets the iframe s height whenever the document is resized    lt html gt   lt head gt       lt title gt my I frame is as tall as your page lt  title gt        lt script type  text javascript  src  http   code jquery com jquery-2 1 1 min js  gt  lt  script gt   lt  head gt   lt body onresize      iframe1   attr  height     window  height      style  margin 0    gt       lt iframe id  iframe1  src  yourpage html  style  width 100     onload  this height   window  height     gt  lt  iframe gt   lt  body gt   lt  html gt    here s a working sample  http   jsbin com soqeq 1

User · Answer

x000D   x000D  body   x000D      margin  0                Reset default margin    x000D    x000D  iframe   x000D      display  block           iframes are inline by default    x000D      background   000  x000D      border  none             Reset default border    x000D      height  100vh            Viewport-relative units    x000D      width  100vw  x000D    x000D   lt iframe gt  lt  iframe gt  x000D   x000D   x000D

User · Answer

lt iframe src    style  top 0 left  0 width 100  height  100   position  absolute  border  none  gt  lt  iframe gt

User · Answer

Another way to  build fluid full screen iframe     Embedded video fills entire viewport area when page loads  Nice approach for landing pages with video or any embedded content  You can have any additional content below of embedded video  which is revealed when scrolling page down   Example   CSS and HTML code    x000D   x000D  body   x000D      margin  0  x000D      background-color   E1E1E1  x000D    x000D  header   x000D      width  100   x000D      height  56vw  x000D      max-height  100vh  x000D    x000D   embwrap   x000D      width  100   x000D      height  100   x000D      display  table  x000D    x000D   embwrap  embcell   x000D      width  auto  x000D      background-color  black  x000D      display  table-cell  x000D      vertical-align  top  x000D    x000D   embwrap  embcell  ifrwrap   x000D      height  100   x000D      width  100   x000D      display  inline-table  x000D      background-color  black  x000D    x000D   x000D   embwrap  embcell  ifrwrap iframe   x000D      height  100   x000D      width  100   x000D    x000D   lt header gt  x000D     lt div class  embwrap  gt  x000D       lt div class  embcell  gt  x000D         lt div class  ifrwrap  gt  x000D           lt iframe webkitallowfullscreen  true  mozallowfullscreen  true  allowfullscreen  true  allowtransparency  true  scrolling  no  frameborder  0  width  1920  height  1440  src  http   www youtube com embed 5SIgYp3XTMk autoplay 0 amp amp modestbranding 1 amp amp iv load policy 3 amp amp showsearch 0 amp amp rel 1 amp amp controls 1 amp amp showinfo 1 amp amp fs 1  gt  lt  iframe gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  header gt  x000D   lt article gt  x000D     lt div style  margin 30px  text-align  justify   gt  x000D       lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Duis lorem orci  rhoncus ut tellus non  pharetra consequat risus   lt  p gt  x000D       lt p gt Mauris aliquet egestas odio  sit amet sagittis tellus scelerisque in  Fusce in mauris vel turpis ornare placerat non vel purus  Sed in lobortis  lt  p gt  x000D     lt  div gt  x000D   lt  article gt  x000D   x000D   x000D

User · Answer

Only this worked for me  but for  same-domain     function MakeIframeFullHeight iframeElement       iframeElement style width      100        var ifrD   iframeElement contentDocument    iframeElement contentWindow document      var mHeight   parseInt  window getComputedStyle  ifrD documentElement  height        Math max  ifrD body scrollHeight     offsetHeight      clientHeight      var margins   ifrD body style margin   ifrD body style padding   ifrD documentElement style margin   ifrD documentElement style padding      if margins        margins 0   ifrD body style margin  0px          function           var interval   setInterval function            if ifrD readyState      complete                 iframeElement style height     parseInt window getComputedStyle  ifrD documentElement  height    margins 1    px               setTimeout  function    clearInterval interval      1000                        1000                you can use either    MakeIframeFullHeight document getElementById  iframe id       or    lt iframe      onload  MakeIframeFullHeight this

User · Answer

I ran into the same problem  I was pulling an iframe into a div   Try this    lt iframe src  http   stackoverflow com   frameborder  0  scrolling  yes  seamless  seamless  style  display block  width 100   height 100vh   gt  lt  iframe gt    The height is set to 100vh which stands for viewport height   Also  the width could be set to 100vw  although you ll likely run into problems if the source file is responsive  your frame will become very wide

User · Answer

http   embedresponsively com   This is a great resource and has worked very well  the few times I ve used it  Creates the following code       lt style gt   embed-container   position  relative  padding-bottom  56 25   height  0  overflow  hidden  max-width  100       embed-container iframe   embed-container object   embed-container embed   position  absolute  top  0  left  0  width  100   height  100      lt  style gt   lt div class  embed-container  gt   lt iframe src  http   player vimeo com video 66140585  frameborder  0  webkitAllowFullScreen mozallowfullscreen allowFullScreen gt  lt  iframe gt   lt  div gt

User · Answer

lt iframe src  http   youraddress com  style  width  100   height  100vh   gt    lt  iframe gt

[javascript] Full-screen iframe with a height of 100%

Examples related to javascript

Examples related to html

Examples related to css

Examples related to iframe

Examples related to html-frames