Full Page iframe

Question

I have the example code below  This works fine with all browsers except for browsers on mobile devices   The overflow tag is the issue   Works with all except for mobile   margin  0  padding  0  height  100   overflow  hidden    Works with all mobile and not computers   margin  0  padding  0  height  100     What s the best way to get it to work on both    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt title gt Test Layout lt  title gt           lt style type  text css  gt              body  html                               margin  0  padding  0  height  100   overflow  hidden                         lt  style gt       lt  head gt       lt body gt           lt iframe width  100   height  100   src  http   www cnn com    gt       lt  body gt   lt  html gt

User · Answer

This is cross-browser and fully responsive    lt iframe   src  https   drive google com file d 0BxrMaW3xINrsR3h2cWx0OUlwRms preview    style       position  fixed      top  0px      bottom  0px      right  0px      width  100       border  none      margin  0      padding  0      overflow  hidden      z-index  999999      height  100       gt   lt  iframe gt

User · Answer

For full-screen frame redirects and similar things I have two methods  Both work fine on mobile and desktop  Note this are complete cross-browser working  valid HTML files  Just change title and src for your needs  1  this is my favorite   lt  DOCTYPE html gt   lt meta charset utf-8 gt   lt title gt  Title-1  lt  title gt   lt meta name viewport content  quot width device-width quot  gt   lt style gt   html  body  iframe   height 100   width 100   margin 0  border 0  display block    lt  style gt   lt iframe src src1 gt  lt  iframe gt    lt  -- More verbose CSS for better understanding    html     height 100      body     height 100   margin 0     iframe   height 100   width 100   border 0  display block   -- gt   or 2  something like that  slightly shorter   lt  DOCTYPE html gt   lt meta charset utf-8 gt   lt title gt  Title-2  lt  title gt   lt meta name viewport content  quot width device-width quot  gt   lt iframe src src2 style  quot position absolute  top 0  left 0  width 100   height 100   border 0 quot  gt   lt  iframe gt   Note  The above examples avoid using height 100vh because old browsers don t know it  maybe moot these days  and height 100vh is not always equal to height 100  on mobile browsers  probably not applicable here   Otherwise  vh simplifies things a little bit  so 3  this is an example using vh  not my favorite  less compatible with little advantage   lt  DOCTYPE html gt   lt meta charset utf-8 gt   lt title gt  Title-3  lt  title gt   lt meta name viewport content  quot width device-width quot  gt   lt style gt   body   margin 0    iframe   display block  width 100   height 100vh  border 0    lt  style gt   lt iframe src src3 gt  lt  iframe gt

User · Answer

Put this in your CSS   iframe     width  100     height  100vh

User · Answer

This is what I have used in the past    html  body     height  100     overflow  auto      Also in the iframe add the following style  border  0  position fixed  top 0  left 0  right 0  bottom 0  width 100   height 100

User · Answer

Here s the working code  Works in desktop and mobile browsers   hope it helps   thanks for everyone responding    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt title gt Test Layout lt  title gt           lt style type  text css  gt              body  html                               margin  0  padding  0  height  100   overflow  hidden                              content                               position absolute  left  0  right  0  bottom  0  top  0px                          lt  style gt       lt  head gt       lt body gt           lt div id  content  gt               lt iframe width  100   height  100   frameborder  0  src  http   cnn com    gt           lt  div gt       lt  body gt   lt  html gt

[html] Full Page <iframe>

Examples related to html

Examples related to css

Examples related to iframe