dee*_*pak 13 html javascript css iframe jquery
我需要做以下事情:
任何人都可以帮忙吗？
我不能用的东西:
位置:固定;(主要是由于我用于侧边栏的脚本
<!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>
4dg*_*rav 10
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>
小智 5
这对我有用
<iframe frameborder="0" height="490" scrolling="no" src="" width="735"></iframe>通常您会设置 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>
| 归档时间： |
|
| 查看次数： |
49296 次 |
| 最近记录： |