如何将 iframe 高度和宽度设置为 100%
Posted
技术标签:
【中文标题】如何将 iframe 高度和宽度设置为 100%【英文标题】：How to set the iframe height & width to 100% 【发布时间】：2014-05-26 11:07:35 【问题描述】：我需要做以下事情：
-
我有一个 70 像素的标题内容和一个带有包装器的 iframe。
iframe 的高度和宽度必须设置为 100%
卷轴，除了为身体而来的卷轴，当
内容已加载，内容的大小更大。
iframe 的内容是来自同一域的另一个 html 页面。
iframe 还需要根据响应式 HTML 进行缩放
页面。
谁能帮忙？
我不能使用的东西：
位置：固定；（主要是由于我用于侧滑栏的脚本
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bus Management System</title>
<!-- Viewport meta tag to prevent iPhone from scaling our page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function()
var iFrames = $('iframe');
function iResize()
for (var i = 0, j = iFrames.length; i < j; i++)
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
if ($.browser.safari || $.browser.opera)
iFrames.load(function()
setTimeout(iResize, 0);
);
for (var i = 0, j = iFrames.length; i < j; i++)
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
else
iFrames.load(function()
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
);
);
</script>
</head>
<style type="text/css" media="all">
html, body, iframe width:100%; height:100%;box-sizing:border-box; margin:0; padding:0; border:0;
body border:4px solid green;
iframe border:6px solid red;width:100%; height:100%;display:block;
#wrapper border:2px solid blue; width:100%; height:100%;
</style>
<body>
<div style="height:50px; background-color:#000; color:#fff;">Header</div>
<iframe src="http://www.google.com" style="width:100%; height:100%;" onLoad="calcHeight();"></iframe>
</body>
</html>
【问题讨论】：
【参考方案1】：100% 宽度和高度以及响应式的 CSS 唯一解决方案
HTML
<div class="container">
<div class="h_iframe">
<iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
html,body
height:100%;
.h_iframe iframe
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
DEMO
没有位置：绝对
css
html,body height:100%;
.h_iframe iframe width:100%; height:100%;
.h_iframe
height: 100%;
DEMO 2
终于来了破解
现代浏览器现在支持：
width: calc(100% - 70px);
CSS
html,body
height:100%;
margin-top:0;
margin-bottom:0;
.h_iframe iframe
width:100%;
height:calc(100% - 75px);
.h_iframe
height: 100%;
.element
width:100%;
height:70px;
background:red;
HTML
<div class="container">
<div class="element">here it goes</div>
<div class="h_iframe">
<iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Final DEMO
【讨论】：
谢谢高拉夫。但是我在正文部分有一个带有响应式下拉菜单的标题。当菜单下拉整个内容时，包括 iframe 在内的所有内容都会调整其位置，因此不确定我是否可以使用 Position:absolute; 查看编辑，现在没有位置：absolute 如果在正文中有另一个标题元素（div=70px）和 iframe，你会如何处理这个问题？希望你得到我的问题？ 我不太确定你的问题。是这个jsfiddle.net/4dgaurav/3LAat/2 如果您考虑您的示例，标题的高度为 70 像素。即使我将所有 iFrame 父级指定为 100% 的高度。滚动是通过添加标题（.element）的 70px 高度来实现的。在调整大小时，我需要没有那些滚动条的 iframe 的流动宽度和高度。现在得到了吗？【参考方案2】：这对我有用
<iframe frameborder="0" height="490" scrolling="no" src="" width="735"></iframe>【讨论】：
您能否在答案中添加更多详细信息/上下文。请解释为什么这对你有用。您的解决方案适用于所有屏幕宽度吗？ 也可以。例如：<iframe frameborder="0" height="490" scrolling="no" src="" width="100%"></iframe>【参考方案3】：
大众单位工作（在 Chrome 和 Firefox 上测试）
iframe
width:100vw;
【讨论】：
【参考方案4】：通常您为 iframe 设置宽度和高度。如果里面的内容比较大，滚动条就足够了。下面的脚本试图通过动态调整 iframe 的大小以适应它加载的内容来解决这个问题。
您可以使用此功能使用 jquery /javascript 设置自动高度
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function()
var iFrames = $('iframe');
function iResize()
for (var i = 0, j = iFrames.length; i < j; i++)
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
if ($.browser.safari || $.browser.opera)
iFrames.load(function()
setTimeout(iResize, 0);
);
for (var i = 0, j = iFrames.length; i < j; i++)
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
else
iFrames.load(function()
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
);
);
</script>
你的 iframe html 像这样
<iframe src="http://www.google.com" class="iframe" scrolling="no" frameborder="0"></iframe>
【讨论】：
嗨：我仍然得到双滚动 - 我需要在这里做两件事 1. 我需要从主 HTML 中删除滚动，这是由于正文中的 header=70px 而发生的 2。 iframe 还需要根据内容 HTML 进行缩放。对不起，我也是一只新蜜蜂。 脚本还会抛出 Uncaught ReferenceError: $ is not defined 错误 你需要添加jquery库..使用` 您的 Ifrme 是同一个域还是不同域？【参考方案5】：简单干净。 jQuery 是必需的。来源：https://***.com/a/3940802
稍作修改
function iframeHeight()
var newHeight = $(window).height();
var newWidth = $(window).width();
var buffer = 100; // space required for any other elements on the page
var newIframeHeight = newHeight - buffer;
$('iframe.fop').css('height',newIframeHeight).css('width',newWidth); //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
// When DOM ready
$(function()
window.onresize = iframeHeight;
iframeHeight();
);<iframe src="" target="_parent" width="100%" height="100%" class="fop"></iframe>【讨论】：
【参考方案6】：你可以尝试做这样的事情：
iframe
width: 825px; // you define your standar width and height
height: 464px;
@media screen and (max-width: 1000px) // then for your responsive you do this or only this.
width: calc(84vw);
height: calc(47vw)
【讨论】：
【参考方案7】：我有一个比例为 6:19 的视频帧来自 YouTube -> 通过计算 9/16 - 0.5625。乘以 95vw（也可以设置为 100vW）。
尽最大努力保持视频比例不变。
@media all and (max-width: 730px)
iframe
width: 95vw !important;
height: calc(95vw*0.56) !important;
iframe
margin:auto;
display:block;
width:685px;
height:385px;
<iframe id="video" allowfullscreen src="https://www.youtube.com/embed/5Mdy8nBBbQQ?autoplay=1"></iframe>【讨论】：
以上是关于如何将 iframe 高度和宽度设置为 100%的主要内容，如果未能解决你的问题，请参考以下文章
HTML/CSS的自适应高度问题。 我觉得宽度问题可以设置为100%，但是高度问题如何解决就是个悲剧了。