css 整页< iframe>

8tntrjer 于 2022-12-24 发布在其他

关注(0)|答案(6)|浏览(142)

我有下面的示例代码。除了移动的设备上的浏览器外，这在所有浏览器上都能正常工作。
溢出标记是问题所在。
适用于除移动的以外的所有设备：

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>

css

来源：https://stackoverflow.com/questions/17710039/full-page-iframe

6条答案

按热度按时间

inn6fuwd1#

这是工作代码，它可以在桌面和移动的浏览器上工作。

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

赞(0）回复(0）举报 2022-12-24

fykwrbwg2#

这是跨浏览器和完全响应：

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

赞(0）回复(0）举报 2022-12-24

tv6aics13#

把这个放到你的CSS里。

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

赞(0）回复(0）举报 2022-12-24

omvjsjqw4#

这是我过去用过的。

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

此外，在iframe中添加以下样式

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

赞(0）回复(0）举报 2022-12-24

voj3qocg5#

对于全屏帧重定向和类似的东西，我有两种方法。这两种方法在手机和桌面上都很好用。
请注意，这是完整的跨浏览器工作，有效的HTML文件。只是改变title和src为您的需要。

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

- 注**：

上面的例子避免使用height:100vh，因为旧的浏览器不知道它（现在可能没有实际意义），而且height:100vh在移动浏览器上并不总是等于height:100%（这里可能不适用）。

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

赞(0）回复(0）举报 2022-12-24

lxkprmvk6#

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

赞(0）回复(0）举报 2022-12-24

我来回答

css 整页< iframe>

6条答案

相关问题

热门标签

最新问答