Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Full Page <iframe>

Tags:

html

css

iframe

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> 
like image 442
Lacer Avatar asked Jul 17 '13 20:07

Lacer


People also ask

How do I make an iframe fill the whole page?

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.

Can you fullscreen iframe?

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.

How do I make my iframe longer?

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."


2 Answers

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> 
like image 190
Lacer Avatar answered Sep 28 '22 13:09

Lacer


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> 
like image 24
tawsif torabi Avatar answered Sep 28 '22 12:09

tawsif torabi