Iframe plein écran d'une hauteur de 100%

238

La hauteur iframe = 100% est-elle prise en charge dans tous les navigateurs?

J'utilise doctype comme:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dans mon code iframe, si je dis:

<iframe src="xyz.pdf" width="100%" height="100%" />

Je veux dire, cela prendra-t-il réellement la hauteur de la page restante (car il y a un autre cadre en haut avec une hauteur fixe de 50 pixels) Est-ce pris en charge dans tous les principaux navigateurs (IE / Firefox / Safari)?

En ce qui concerne également les barres de défilement, même si je dis scrolling="no", je peux voir les barres de défilement désactivées dans Firefox ... Comment masquer complètement les barres de défilement et définir automatiquement la hauteur de l'iframe?

javascript html css iframe html-frames testndtv
la source
14
Voir en fait je n'ai pas tous les navigateurs installés ..
Versions aussi
1
Vous pouvez également l'essayer dans un validateur CSS.
Ruben
6
Oui, cela ne donne aucune erreur / avertissement ... Mais ma question est: tous les navigateurs appliquent-ils réellement une hauteur de 100%?
testndtv
Pour moi, cette réponse a bien fonctionné: stackoverflow.com/questions/5272519/…
Zied Hamdi

Réponses:

276

Vous pouvez utiliser le jeu de cadres comme les états de réponse précédents, mais si vous insistez pour utiliser des iFrames, les 2 exemples suivants devraient fonctionner:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Une alternative:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Pour masquer le défilement avec 2 alternatives comme indiqué ci-dessus:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hack avec le deuxième exemple:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Pour masquer les barres de défilement de l'iFrame, le parent est fait overflow: hiddenpour masquer les barres de défilement et l'iFrame est fait pour aller jusqu'à 150% de largeur et de hauteur, ce qui force les barres de défilement à l'extérieur de la page et puisque le corps n'a pas de barres de défilement on ne peut pas s'attendre à ce que l'iframe dépasse les limites de la page. Cela cache les barres de défilement de l'iFrame avec toute la largeur!

Hache
la source
3
Cela semble bon ... Une seule question cependant ... Pourquoi devons-nous utiliser style = "hauteur: 100%; largeur: 100%;" quand on dit de toute façon iframe height = "100%" width = "100%"
testndtv
1
De plus, seul IE ne prend pas 100% de la hauteur (prend environ 200px ht) ... FF et Safri prennent toute la hauteur restante ..
testndtv
@Boris Zbarsky Ouais, merci de me le faire savoir! J'ai mis à jour le message maintenant !! @hmthr Votre première question concernant les doubles balises est parce que les navigateurs antérieurs prennent les balises "hauteur" et "largeur" ​​mais ne fonctionnent pas bien avec les balises de style! À propos du bogue IE, je préférerais que vous vous en teniez au premier code pour ce cas.
Axe
15
Pour que l'iframe utilise correctement 100%, le parent doit être à 100%. Dans les doctypes plus récents, les balises html et body ne sont pas automatiquement à 100%. Quand j'ai ajouté de la hauteur: 100% pour le html et le corps, cela a fonctionné parfaitement. Donc, la bonne réponse à la question, je pense, est la réponse de rudie, sauf que je devais garder mon doctype xhtml. Notez également que les règles de débordement ne sont alors pas nécessaires. Les barres de défilement fonctionnent alors comme prévu - automatiquement.
Spiralis
3
Cette réponse SO est également très courte et agréable.
Uwe Keim
164

3 approches pour créer un plein écran iframe:

  • Approche 2 - Positionnement fixe

    Cette approche est assez simple. Définissez simplement le positionnement de l' fixedélément et ajoutez un height/ widthde 100%.

    Exemple ici

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Développer l'extrait

  • Approche 3

    Pour cette dernière méthode, vient de mettre le heightdes body/ html/ iframeéléments à 100%.

    Exemple ici

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Développer l'extrait

Josh Crozier
la source
4
J'ai fini par utiliser une variante de l'option 1 ... J'ai utilisé la largeur: 100% et la hauteur: 100vh car la source que je tirais était assez large et l'iframe est contenue dans une div. Excellente solution. Je vous remercie.
NotJay
2
l'ajout a display: blockfait l'affaire pour éviter d'avoir une double barre de défilement
KavenG
45

1. Changez votre DOCTYPE en quelque chose de moins strict. N'utilisez pas XHTML; c'est idiot. Utilisez simplement le doctype HTML 5 et vous êtes bon:

<!doctype html>

2. Vous devrez peut-être vous assurer (selon le navigateur) que le parent de l'iframe a une hauteur. Et son parent. Et son parent. Etc:

html, body { height: 100%; }
Rudie
la source
9
La partie importante ici pour moi était que le html et la balise body avaient besoin d'une hauteur: 100%. Merci.
Spiralis
1
La définition de Just Body fonctionne dans Chrome, mais pas dans les autres navigateurs.
Dingle
Voici 2 approches alternatives .
Josh Crozier
36

J'ai rencontré le même problème, je tirais un iframe dans un div. Essaye ça:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

La hauteur est définie sur 100vh, ce qui signifie la hauteur de la fenêtre d'affichage. En outre, la largeur peut être définie sur 100vw, bien que vous rencontrerez probablement des problèmes si le fichier source est réactif (votre cadre deviendra très large).

NotJay
la source
3
pour autant que je sache, seamless n'est pris en charge dans aucun navigateur
VisualBean
1
Après avoir passé plus de temps que je ne voudrais l'admettre, je m'excuse avec ce problème, c'est exactement ce dont j'avais besoin. Sauf qu'au lieu d'un site Web, j'ai utilisé un autre fichier HTML, qui nécessitait un ajustement mineur de la hauteur de la fenêtre et maintenant c'est bon. Je vous remercie!
Thomas Jacobs
29

Cela a très bien fonctionné pour moi (uniquement si le contenu iframe provient du même domaine ):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
Ivan
la source
21
Cela ne fonctionnera que si l ' iframe srcest sur le même domaine que la page parent, sinon vous obtiendrez une erreur d'autorisation refusée sur contentWindow.document.
wolfyuk
Il a fallu un peu pour que cela fonctionne à l'intérieur de Wordpress, je viens d'ajouter un shortcode dans mon plugin. FONCTIONNE COMME UN CHARME.
Andy
Ça marche. mais le problème est qu'il ne sera pas recalculé la hauteur sur chaque postback iframe interne. Y a-t-il une solution de contournement ?
Behrouz.M
7 

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>
Développer l'extrait

khoa
la source
6

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

Heitor Giacomini
la source
4

Le fonctionnement testé suivant

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
Uma Shankar Goel
la source
1
Il y a déjà 14 autres réponses ici. Pouvez-vous expliquer en quoi votre réponse est meilleure ou au moins différente des 14 autres?
Stephen Rauch
2

En plus de la réponse d'Akshit Soota: il est important de définir explicitement la hauteur de chaque élément parent, également de la table et de la colonne le cas échéant:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
Brabbeldas
la source
2

Vous ajoutez d'abord css

html,body{
height:100%;
}

Ce sera le html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
Tariq Javed
la source
1

Voici un code concis. Il s'appuie sur une méthode jquery pour trouver la hauteur actuelle de la fenêtre. Au chargement d'iFrame, il définit la hauteur de l'iframe comme la fenêtre actuelle. Ensuite, pour gérer le redimensionnement de la page, la balise body possède un gestionnaire d'événements onresize qui définit la hauteur de l'iframe chaque fois que le document est redimensionné.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

voici un exemple de travail: http://jsbin.com/soqeq/1/

BraveNewMath
la source
0

Une autre façon de créer un fluide plein écran iframe:

La vidéo intégrée remplit tout viewport zone lors du chargement de la page

Belle approche pour les pages de destination avec vidéo ou tout contenu intégré. Vous pouvez avoir n'importe quel contenu supplémentaire ci-dessous de la vidéo intégrée, qui est révélé lors du défilement de la page vers le bas.

Exemple:

Code CSS et HTML.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>
Développer l'extrait

DAH
la source
Veuillez noter que vous pourriez avoir besoin de Javascript pour Firefox. Il y a un problème commun avec la hauteur des iframes sur Firefox.
DAH
0

http://embedresponsively.com/

Ceci est une excellente ressource et a très bien fonctionné, les quelques fois où je l'ai utilisé. Crée le code suivant ....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
Tom Witherington
la source
0

Seulement cela a fonctionné pour moi (mais pour "même domaine"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

vous pouvez utiliser soit: 

MakeIframeFullHeight(document.getElementById("iframe_id"));

ou 

<iframe .... onload="MakeIframeFullHeight(this);" ....
T.Todua
la source
0

Selon https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , les valeurs de pourcentage ne sont plus autorisées. Mais ce qui suit a fonctionné pour moi

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Bien que width:100%fonctionne, height:100%ne fonctionne pas. Ainsi window.innerHeighta été utilisé. Vous pouvez également utiliser des pixels CSS pour la hauteur.

Code de travail: Lien Site de travail: Lien

Agnel Vishal
la source
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
blueDexter
la source
0

Vous pouvez appeler une fonction qui calculera la hauteur du corps de l'iframe lorsque l'iframe est chargée:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
Tejpal Sharma
la source