是否所有浏览器都支持iframe height=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的帧) 所有主流浏览器(IE/Firefox/Safari)都支持这个功能吗?

同样关于滚动条,即使我说scrolling="no",我也能在Firefox中看到禁用的滚动条…如何完全隐藏滚动条并自动设置iframe高度?


当前回答

1. 将DOCTYPE更改为不那么严格的内容。不要使用XHTML;这是愚蠢的。只要使用HTML 5文档类型就可以了:

<!doctype html>

2. 您可能需要确保(取决于浏览器)iframe的父对象有一个高度。和它的父结点。和它的父结点。等:

html, body { height: 100%; }

其他回答

除了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>

如果你的父元素<div>用这里提到的多重解填充高度。

那你也可以用

<div style="display:flex;">
    <iframe style="flex:1 1 0%;" src="..."></iframe>
</div>

这对我来说非常有用(除非iframe内容来自同一个域):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>

http://embedresponsively.com/

这是一个很好的资源,我用过几次,效果很好。创建以下代码....

<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>

另一种构建流体全屏iframe的方法:


当页面加载时,嵌入式视频填充整个视口区域

很好的方法登陆页面与视频或任何嵌入式内容。您可以有任何额外的内容下面嵌入视频,这是显示时,滚动页面向下。

例子:

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>