Question

我希望我的div能够全屏显示我有一个类似于以下的结构，当我的div在iframe之外但我无法摆脱iframe时，我的方法有效。

HTML

<html>
    <body>
        <iframe>
            <div id="contentDiv">Content</div>
        </iframe>
    </body>
</html>

CSS

.Maximized{
    position: absolute;
    top: 0;
    left: 0;
    width:100% !important;
    height:100% !important;
}

当用户全屏浏览器时，我的内容div也应全屏显示。在我的fullscreen-on活动中，我执行以下操作

$('#contentDiv').addClass('Maximized');

然而div填充iframe而不是主窗口。

是否可以通过添加课程使我的div全屏显示？

Answer 1

不，你需要让iframe全屏显示。

就iframe的内容而言，iframe是窗口，因此在iframe中全屏显示只会使其成为iframe的大小。但是，如果您将iframe的大小调整为完整窗口，那么只要您的iframe上没有边框，填充或边距，其内容也可以填满。

Answer 2

试试这段代码：

<iframe width="100%" height="100%" >
<div id="contentDiv">Content</div>
</iframe>

Answer 3

iframe需要src。您无法通过iframe窗口直接访问parent的CSS，但这在您的情况下无关紧要。您的代码看起来应该更像：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/css'>
      iframe{
        height:100%; width:100%;
      }
    </style>
  </head>
<body>
  <iframe src='content.html'></iframe>
</body>
</html>

我可以使用CSS类来设置iframe中的div作为父窗口的宽度和高度吗？

3 个答案: