Html 整页 <iframe>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17710039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full Page <iframe>
提问by Lacer
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>
回答by Lacer
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" />
</div>
</body>
</html>
回答by tawsif torabi
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>
回答by shoriwa-shaun-benjamin
Put this in your CSS.
把它放在你的 CSS 中。
iframe {
width: 100%;
height: 100vh;
}
回答by Jay Patel
This is what I have used in the past.
这是我过去使用的。
html, body {
height: 100%;
overflow: auto;
}
Also in the iframeadd the following style
同样在iframe添加以下样式
border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
回答by j.j.
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 titleand srcfor your needs.
You may consider dropping <meta charset>if you don't have non-ASCII characters.
请注意，这是完整的跨浏览器工作的有效 HTML 文件。只需更改title并src满足您的需求。如果您没有非 ASCII 字符，
您可以考虑删除<meta charset>。
1. thisis my favorite:
1.这是我的最爱：
<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
html, body, iframe { display:block; margin:0; width:100%; height:100%; border:0 }
</style>
<iframe src=src1></iframe>
<!-- More verbose CSS for better understanding:
body { margin:0 }
html, body, iframe { height:100% }
iframe { display:block; width:100%; border:0 }
-->
or 2. something like that, slightly shorter:
或 2. 类似的东西，稍微短一点：
<!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>
注意：
为了保守起见，上面避免使用，
100vh100vh因为旧浏览器不知道它（这些天可能没有实际意义）并且100vh100vh并不总是100%100%在移动浏览器上（可能不适用这里）。否则，vhvh稍微简化一下，所以3. this is an example using vh(not my favorite, less compatible with little advantage)
3.这是一个使用vh的例子（不是我最喜欢的，兼容性较差，优势不大）
<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
body, iframe { display:block; margin:0; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>
<!-- More verbose CSS:
body { margin:0 }
iframe { display:block; width:100%; height:100vh; border:0 }
-->
