html iframe高度全屏,全屏iframe的高度为100％

你可以使用框架作为以前的答案状态，但如果你坚持使用iFrames，下面的两个例子应该工作：

替代：

如上所示隐藏滚动2种select：

与第二个例子一起使用：

为了隐藏iFrame的滚动条，父项被设置为overflow: hidden隐藏滚动条，并且iFrame的宽度和高度达到150％，强制页面外的滚动条，因为body没有滚动条可能不会指望iframe超出页面的边界。 这隐藏了iFrame的全部滚动条！

3种创build全屏iframe ：

方法1 – 视口百分比长度

在受支持的浏览器中 ，可以使用视口百分比长度，例如height: 100vh 。

100vh表示视口的高度，同样100vw表示宽度。

示例在这里

body { margin: 0; /* Reset default margin */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ height: 100vh; /* Viewport-relative units */ width: 100vw; }

1.把你的DOCTYPE改成不太严格的东西。 不要使用XHTML; 这很愚蠢。 只要使用HTML 5的文档types，你很好：

2.您可能需要确定(取决于浏览器)iframe的父代有一个高度。 和它的父母。 和它的父母。 等等：

html, body { height: 100%; }

这对我来说非常好：

我遇到了同样的问题，我把一个iframe放到一个div中。 尝试这个：

高度设置为100vh，代表视口高度。 此外，宽度可以设置为100vw，但如果源文件响应(您的框架将变得非常宽)，您可能会遇到问题。

你首先添加CSS

html,body{ height:100%; }

这将是html：

Your browser does not support iframes.

除了Akshit Soota的回答：它是importand显式设置每个父元素的高度，也是表和列的高度，如果有的话：

body { margin: 0; /* Reset default margin */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ height: 100vh; /* Viewport-relative units */ width: 100vw; }

这里是一个简洁的代码。 它确实依靠jquery方法来查找当前的窗口高度。 在加载iFrame时，它将iframe的高度设置为与当前窗口相同。 然后，为了处理页面的大小调整，body标签有一个onresize事件处理器，它在文档resize时设置iframe的高度。

my I frame is as tall as your page

这里有一个工作示例： http : //jsbin.com/soqeq/1/

另一种构buildstream畅的全屏iframe ：

embeddedvideo在页面加载时填充整个viewport区

使用video或任何embedded内容的着陆页的好方法。 您可以在embedded式video的下方添加任何其他内容，当滚动页面时会显示这些内容。

例：

CSS和HTML代码。

body { margin: 0; background-color: #E1E1E1; } header { width: 100%; height: 56vw; max-height: 100vh; } .embwrap { width: 100%; height: 100%; display: table; } .embwrap .embcell { width: auto; background-color: black; display: table-cell; vertical-align: top; } .embwrap .embcell .ifrwrap { height: 100%; width: 100%; display: inline-table; background-color: black; } .embwrap .embcell .ifrwrap iframe { height: 100%; width: 100%; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus.

Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis

这是一个很好的资源，运行得非常好，我曾经使用过它。 创build下面的代码….