Full Page <iframe>
HtmlCssIframeHtml Problem Overview
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>
Html Solutions
Solution 1 - Html
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>
Solution 2 - 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>
Solution 3 - Html
Put this in your CSS.
iframe {
width: 100%;
height: 100vh;
}
Solution 4 - Html
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%
Solution 5 - Html
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:
<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>
<!-- More verbose CSS for better understanding:
html { height:100% }
body { height:100%; margin:0 }
iframe { height:100%; width:100%; border:0; display:block }
-->
or 2. something like that, slightly shorter:
<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>
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)
<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
body { margin:0 }
iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>
Solution 6 - Html
Set the iframe to height 100vh and width 100%:
<iframe src="https://stackoverflow.com"
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>