全屏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&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;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> 

http://embedresponsively.com/

这是一个很好的资源,运行得非常好,我曾经使用过它。 创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>