全屏iframe的高度为100％
所有浏览器都支持iframe高度= 100％吗？
我正在使用doctype：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在我的iframe代码中，如果我说：
<iframe src="xyz.pdf" width="100%" height="100%" />
我的意思是实际上会占用剩余页面的高度（因为在顶部固定高度为50px的情况下还有另外一个框架）。所有主stream浏览器（IE / Firefox / Safari）都支持这个function吗？
关于滚动条，即使我说scrolling="no" ，我可以看到在Firefox中禁用滚动条…我如何完全隐藏滚动条并自动设置iframe的高度？
你可以使用框架作为以前的答案状态，但如果你坚持使用iFrames，下面的两个例子应该工作：
<body style="margin:0px;padding:0px;overflow:hidden"> <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe> </body>
替代：
<body style="margin:0px;padding:0px;overflow:hidden"> <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe> </body>
如上所示隐藏滚动2种select：
<body style="margin:0px;padding:0px;overflow:hidden"> <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe> </body>
与第二个例子一起使用：
<body style="margin:0px;padding:0px;overflow:hidden"> <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe> </body>
为了隐藏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; }<iframe></iframe>
1.把你的DOCTYPE改成不太严格的东西。 不要使用XHTML; 这很愚蠢。 只要使用HTML 5的文档types，你很好：
<!doctype html>
2.您可能需要确定（取决于浏览器）iframe的父代有一个高度。 和它的父母。 和它的父母。 等等：
html, body { height: 100%; }
这对我来说非常好：
<script type="text/javascript"> function calcHeight() { //find the height of the internal page var the_height= document.getElementById('the_iframe').contentWindow. document.body.scrollHeight; //change the height of the iframe document.getElementById('the_iframe').height= the_height; } </script> <iframe width="100%" src="./1BA3A.mht" scrolling="no" id="the_iframe" onLoad="calcHeight();" height="1px" frameborder="0" ></iframe>
我遇到了同样的问题，我把一个iframe放到一个div中。 尝试这个：
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
高度设置为100vh，代表视口高度。 此外，宽度可以设置为100vw，但如果源文件响应（您的框架将变得非常宽），您可能会遇到问题。
<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>
你首先添加CSS
html,body{ height:100%; }
这将是html：
<div style="position:relative;height:100%;max-width:500px;margin:auto"> <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%"> <p>Your browser does not support iframes.</p> </iframe> </div>
除了Akshit Soota的回答：它是importand显式设置每个父元素的高度，也是表和列的高度，如果有的话：
<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; "> <form id="form1" runat="server" style=" height: 100%"> <div style=" height: 100%"> <table style="width: 100%; height: 100%" cellspacing="0" cellpadding="0"> <tr> <td valign="top" align="left" height="100%"> <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" width="100%" height="100%" frameborder="0" scrolling="no" src="http://www.youraddress.com" ></iframe> </td>
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; }
<iframe></iframe>
这里是一个简洁的代码。 它确实依靠jquery方法来查找当前的窗口高度。 在加载iFrame时，它将iframe的高度设置为与当前窗口相同。 然后，为了处理页面的大小调整，body标签有一个onresize事件处理器，它在文档resize时设置iframe的高度。
<html> <head> <title>my I frame is as tall as your page</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" > <iframe id="iframe1" src="yourpage.html" style="width:100%;" onload="this.height=$(window).height();"></iframe> </body> </html>
这里有一个工作示例： 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%; }
<header> <div class="embwrap"> <div class="embcell"> <div class="ifrwrap"> <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&modestbranding=1&iv_load_policy=3&showsearch=0&rel=1&controls=1&showinfo=1&fs=1"></iframe> </div> </div> </div> </header> <article> <div style="margin:30px; text-align: justify;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p> <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p> </div> </article>
这是一个很好的资源，运行得非常好，我曾经使用过它。 创build下面的代码….
<style> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class='embed-container'> <iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div>
