javascript – 如何将iframe的高度和宽度设置为100％

我需要做以下事情：

>我有一个标题内容是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%;
}

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

javascript – 如何将iframe的高度和宽度设置为100％

解决方法

猜你在找的JavaScript相关文章