整页<iframe>

97

我有下面的示例代码。除移动设备上的浏览器外，此功能对所有浏览器均适用。

溢出标签是问题所在。

适用于移动设备以外的所有设备：

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>

html css iframe

— 蕾丝
source

为什么不重定向到cnn.com？

— GolezTrol 2013年

cnn.com只是一个例子。以显示我要防止的行为。

— Lacer

只需添加 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 到包含html的头部，响应性就会再次恢复（至少是部分恢复）。

— Nukey 2015年

171

这是工作代码。可在台式机和移动浏览器中使用。希望能帮助到你。感谢大家的回应。

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

— 蕾丝
source

2

当心，当我想将iframe放在上面时-Chrome中出现问题。我添加结束</ IFRAME>和作品

— 米甲- wereda网

似乎它从iframe中的内容中消除了响应性（即列折叠等）。但是以某种方式仅在使用移动Safari浏览器打开页面时，而不是在调整桌面浏览器的大小时。有什么想法可能导致这种行为吗？

— psteinweber'1

3

@psteinweber，您只需要添加<meta content='width=device-width, initial-scale=1.0' name='viewport'>到包含页面。

— 2015年

必须使用vw代替%for width和height properties来在Chromium 81中获得正确的对齐。否则，它就像是一种魅力。

— Josh Habdas

18

这是跨浏览器且完全响应的：

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

— Tawsif Torabi
source

7

把它放在你的CSS中。

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

— shoriwa-shaun-benjamin
source

3

这就是我过去使用过的。

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

另外在iframe添加以下样式

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

— 杰伊·帕特尔（Jay Patel）
source

感谢您的答复，但这实际上是我所拥有的，因此它不起作用。在移动浏览器上，它会截断所有溢出的内容，并且不允许您滚动。

— Lacer

@Lacer尝试替换overflow: hidden为overflow: auto

— Jay Patel

确实尝试过。在移动浏览器上仍然会关闭它，而在桌面浏览器上会导致两次滚动

— Lacer

仍然无法在桌面浏览器中实现双滚动并在移动浏览器中停止运行

— Lacer

2

对于全屏重定向和类似操作，我有两种方法。两者都可以在移动设备和台式机上正常工作。

请注意，这是完整的跨浏览器工作的有效HTML文件。只要改变title并src为您的需求。如果您没有非ASCII字符，则
可以考虑删除<meta charset>。

1.这是我的最爱：

<!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%; border:0; display:block; width:100% } -->

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

注意：
为保守起见，上述示例应避免使用，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>

— j
source