整页<iframe>

Question

整页<iframe>

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

溢出标记是问题.

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

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

Run Code Online (Sandbox Code Playgroud)

适用于所有移动设备而非计算机:

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

Run Code Online (Sandbox Code Playgroud)

让它在两者上工作的最佳方法是什么？

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Lac*_*cer 150

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

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

Run Code Online (Sandbox Code Playgroud)

@psteinweber,你只需要在包含页面中添加`<meta content ='width = device-width,initial-scale = 1.0'name ='viewport'>`. (3认同)
请注意,当我想在上面放置一个iframe时 - Chrome中存在问题.我添加了结束</ iframe>并且有效 (2认同)

Answer 2

小智 10

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

sho*_*min 9

把它放在你的 CSS 中。

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，3 月前
查看次数：	124355 次
最近记录：	6 年，6 月前