是否所有浏览器都支持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高度?
当前回答
根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe，百分比值不再被允许。 但下面的方法对我很有效
<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>
虽然宽度:100%可行，但高度:100%行不通。所以窗口。innerHeight已被使用。你也可以用css像素来表示高度。
工作代码:Link工作地点: 链接
其他回答
当iframe加载时，你可以调用一个函数来计算iframe的体高:
<script type="text/javascript">
function iframeloaded(){
var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
curHeight = $frame.contents().find('body').height();
if ( curHeight != lastHeight ) {
$frame.css('height', (lastHeight = curHeight) + 'px' );
}
}
</script>
<iframe onload="iframeloaded()" src=...>
这对我来说非常有用(除非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>
首先添加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>
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>
身体{ 保证金:0;/*重置默认margin */ ｝ iframe { 显示:块;/* iframe默认内联*/ 背景:# 000; 边界:没有;/*重置默认边框*/ 身高:100 vh;/*视口相对单元*/ 宽度:100大众; ｝ < iframe > < / iframe >
