本文介绍了如何设置iframe高度&宽度到100％的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要执行以下操作：
- 我有一个标题内容，70px和一个iframe包装。
高度&必须将iframe的宽度设置为100％，而不使用
滚动，除非加载
内容并且内容的大小更大时，正文的滚动除外。 - iframe的内容是来自同一域的另一个HTML页面。
iframe也需要根据响应的HTML
页面进行缩放。
任何人都可以帮助？ / p>
我不能使用的东西：
位置：固定的（主要是由于我使用的脚本sidelidebars
<！doctype html>
< html>
< head>
< meta charset =UTF-8>
< title>总线管理系统< / title>
<！ - Viewport meta tag to prevent iPhone to scaling our page - > ;
< meta name =viewportcontent =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 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 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 / cssmedia =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.comstyle =width：100％; height：100％; onLoad =calcHeight（）;>< / iframe>
< / body>
< / html>
解决方案
CSS only solution for 100％width and height and responsive
HTML
< div class =container>
< div class =h_iframe>
< iframe src =// www.youtube.com/embed/9KunP3sZyI0frameborder =0allowfullscreen>< / iframe>
< / div>
< / div>
CSS
html，body {
height：100％;
}
.h_iframe iframe {
position：absolute;
top：0;
left：0;
width：100％;
height：100％;
}
无位置：绝对
css
html，body {height：100％;}
.h_iframe iframe {width：100％; height：100％;}
.h_iframe {
height：100％;
}
最后这里是破解
现代浏览器支持：
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>这里它会< / div>
< div class =h_iframe>
< iframe src =// www.youtube.com/embed/9KunP3sZyI0frameborder =0allowfullscreen>< / iframe>
< / div>
< / div>
I am in need of doing the following:
- I have a header content which is 70px and an iframe with a wrapper.The height & width of the iframe has to be set to 100% withoutscroll, except for the scroll that comes for the body when thecontent is loaded and the size of the content is more.
- The content of the iframe is another HTML page from the same domain.The iframe also needs to scale according to the responsive HTMLpage.
Can any one help?
Things I cannot use:
Position:Fixed;(mainly due to a script that i am using for the sideslidebars
<!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>
解决方案
CSS only solution for 100% width and height and responsive
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%;
}
without position : absolute
css
html,body {height:100%;}
.h_iframe iframe {width:100%; height:100%;}
.h_iframe {
height: 100%;
}
And finally here is the crack
Modern browsers now support the:
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>
这篇关于如何设置iframe高度&宽度到100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！