0

我希望我的 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 全屏显示？

4

3 回答 3

1

不，您还需要让 iframe 全屏显示。

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

于 2013-07-30T22:17:53.633 回答
0

试试这个代码：

<iframe width="100%" height="100%" >
<div id="contentDiv">Content</div>
</iframe>
于 2013-07-30T22:19:55.683 回答
0

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

<!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>
于 2013-07-30T22:30:43.197 回答