Как установить высоту и ширину iframe на 100%

Мне нужно сделать следующее:

У меня есть контент заголовка, который равен 70px и iframe с оберткой. Высота и ширина iframe должны быть установлены на 100% без прокрутки, за исключением прокрутки, которая появляется для тела, когда содержимое загружено, а размер содержимого больше.
Содержимое iframe - это другая страница HTML из того же домена. IFrame также должен масштабироваться в соответствии с гибким HTML-кодом стр.

Может ли кто-нибудь помочь?

Вещи, которые я не могу использовать:

Позиция: Исправлено (в основном из-за script, который я использую для сторонних панелей

<!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

Только 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

без позиции: absolute

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

Ответ 2

Обычно вы устанавливаете и ширину и высоту для iframes. Если содержимое внутри больше, полосы прокрутки должны быть достаточными. Ниже приведена script попытка исправить это путем динамического изменения размера 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>

Ответ 3

Простой и чистый. Требуется jQuery. Источник: fooobar.com/questions/35178/...

Изменено немного

                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>

Ответ 4

Это сработало для меня

<iframe frameborder="0" height="490" scrolling="no" src="" width="735"></iframe>

Ответ 5

VW работают (проверено на Chrome и Firefox)

iframe{
 width:100vw;
}