是否所有浏览器都支持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高度?
当前回答
<iframe src="" style=" font - family:宋体;位置:绝对的;边界:没有“> < / iframe >
其他回答
创建全屏iframe的3种方法:
Approach 1 - Viewport-percentage lengths In supported browsers, you can use viewport-percentage lengths such as height: 100vh. Where 100vh represents the height of the viewport, and likewise 100vw represents the width. Example Here 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>
方法2 -固定定位 这种方法相当简单。只需设置固定元素的位置，并添加100%的高度/宽度。 例子 iframe { 位置:固定; 背景:# 000; 边界:没有; 上图:0;右:0; 底部:0;左:0; 宽度:100%; 高度:100%; ｝ < iframe > < / iframe >
方法3 对于最后一种方法，只需将body/html/iframe元素的高度设置为100%。 例子 Html, body { 高度:100%; 保证金:0;/*重置body元素*/的默认边距 ｝ iframe { 显示:块;/* iframe默认内联*/ 背景:# 000; 边界:没有;/*重置默认边框*/ 宽度:100%; 高度:100%; ｝ < iframe > < / iframe >
以下测试工作
<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
当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=...>
除了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>
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>
