Question

我有以下示例代码。这适用于除移动设备上的浏览器之外的所有浏览器。

溢出标记就是问题。

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

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>

Answer 1

这是工作代码。适用于桌面和移动浏览器。希望能帮助到你。谢谢大家的回应。

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

Answer 2

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

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

Answer 3

这是我过去使用过的。

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

同样在iframe添加以下样式

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

Answer 4

把它放在你的CSS中。

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

Answer 5

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

请注意，这是完整的跨浏览器工作的有效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，因为旧的浏览器不知道（也许这些天没有意义）和{{ 1}}在移动浏览器上并不总是等于height:100vh（可能不适用于此处）。否则，height:100%会简化一些事情，所以

3。这是使用vh的示例（不是我的最爱，兼容性较差，优势不明显）

vh

Answer 6

将 iframe 设置为高度 100vh 和宽度 100%：

html,body, div, iframe {
            height: 100vh;
            margin: 0; padding: 0;
        }
        iframe {
        border:1px solid #2d2d2d;
    }
    html,
    body {
        overscroll-behavior-y: contain;
    }

<div class='appDiv'>
        <iframe src="https://stackoverflow.com" 
            width=100% style="height:100vh" marginwidth="0" marginheight="0" align="top" scrolling="Yes" frameborder="0" hspace="0"
            vspace="0"frameborder="0">
           This Application Is not Supported By Your Device/Browser
        </iframe>
     
        </div>

整页<iframe> </iframe>

6 个答案: