完整页 < iframe >

我有下面的示例代码。除了移动设备上的浏览器之外，所有浏览器都可以很好地运行。

溢出标记是问题所在。

除了手机以外，可以和所有人一起工作:

margin: 0; padding: 0; height: 100%; overflow: hidden;

适用于所有的移动设备而不是电脑:

margin: 0; padding: 0; height: 100%;

什么是最好的办法，让它工作的两个？

<!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>
187003 次浏览
小开

这是我以前用过的。

html, body {
height: 100%;
overflow: auto;
}

同样在 iframe中添加以下样式

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%
小开
最佳答案

这里是工作代码。工作在桌面和移动浏览器。希望它有所帮助。感谢大家的回应。

<!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>
小开

这是跨浏览器的，并且反应迅速:

<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>
小开

把这个放到你的 CSS 里。

iframe {
width: 100%;
height: 100vh;
}
小开

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.

这是我最喜欢的:

<!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 }
-->

或者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>


注意 : < br > 上面的例子避免使用 height:100vh，因为旧的浏览器不知道它(现在可能没有实际意义) ，而且 height:100vh在移动浏览器上并不总是等于 height:100%(这里可能不适用)。否则，vh会简化一些事情，所以

3. 这是一个使用 vh 的例子(不是我最喜欢的，兼容性差，优点不多)

<!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>
小开

将 iframe 设置为高度100vh，宽度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>


提交答案