我需要做以下事情：
>我有一个标题内容是70px,一个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>
解决方法
CSS仅适用于100％宽度和高度的响应
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%;
}
没有位置：绝对
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">here it goes</div>
<div class="h_iframe">
<iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
