Menu
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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layout</title> <style type="text/css"> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } </style> </head> <body> <iframe width="100%" height="100%" src="http://www.cnn.com" /> </body> </html> 
442
To size the <iframe> , we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%; . That's it: a full-width <iframe> with fixed aspect ratio.
The ” iframe ” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document. For the fullscreen Iframe, you have to cover the entire viewport.
The width and height inside the embed code can be adjusted by changing the numbers between the quotation marks, shown below. The standard size of an iframe for desktop is a width of "560" and height of "315."
Here's the working code. Works in desktop and mobile browsers. hope it helps. thanks for everyone responding.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layout</title> <style type="text/css"> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #content { position:absolute; left: 0; right: 0; bottom: 0; top: 0px; } </style> </head> <body> <div id="content"> <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com"></iframe> </div> </body> </html> This is cross-browser and fully responsive:
<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%; "> </iframe> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
