web-dev-qa-db-fra.com

Comment définir la hauteur et la largeur de l'iframe sur 100%

J'ai besoin de faire ce qui suit:

  1. J'ai un contenu d'en-tête qui est 70px et un iframe avec un wrapper . La hauteur et la largeur de l'iframe doivent être définies à 100% sans le contenu est chargé et la taille du contenu est plus grande.
  2. Le contenu de l'iframe est une autre page HTML du même domaine . L'iframe doit également être redimensionné en fonction de la réponse HTMLpage.

Quelqu'un peut-il aider?

Choses que je ne peux pas utiliser:

Position: Fixe; (principalement à cause d'un script que j'utilise pour les barres de glissement

<!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>
javascriptjqueryhtmlcssiframe
13
deepak

CSS seule solution pour 100% largeur et hauteur et réactif

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

sans position: absolue

css

html,body        {height:100%;}
.h_iframe iframe {width:100%; height:100%;}
.h_iframe {
    height: 100%;
}

DEMO 2

Et enfin voici la fissure

Les navigateurs modernes supportent maintenant les:

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>

DEMO finale

10
4dgaurav

Simple et propre. jQuery est requis. Source: https://stackoverflow.com/a/3940802

Modifié un peu

                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>

0
Yash

Normalement, vous définissez la largeur et la hauteur des iframes. Si le contenu à l'intérieur est plus grand, les barres de défilement doivent suffire. Le script ci-dessous tente de résoudre ce problème en redimensionnant dynamiquement l'iframe pour l'adapter au contenu qu'il charge.

vous pouvez utiliser cette fonction pour définir la vitesse automatique à l'aide de 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>

Et votre code HTML Iframe comme celui-ci 

<iframe  src="http://www.google.com"  class="iframe" scrolling="no" frameborder="0"></iframe>
0
Anant Dabhi