web-dev-qa-db-fra.com

Iframe plein écran avec une hauteur de 100%

Est-ce que iframe height = 100% est supporté par 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 au dessus avec une hauteur fixe de 50 px) Est-ce pris en charge par tous les principaux navigateurs (IE/Firefox/Safari)?

Également en ce qui concerne 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 puis-je masquer complètement les barres de défilement et définir automatiquement la hauteur de l’iframe?

javascripthtmlcssiframehtml-frames
203
testndtv

Vous pouvez utiliser le jeu de cadres comme réponse précédente, mais si vous insistez pour utiliser 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 se voit attribuer overflow: hidden pour masquer les barres de défilement et l'iFrame doit aller jusqu'à 150% en largeur et en hauteur, ce qui oblige les barres de défilement à sortir de la page. barres, 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 en pleine largeur!

237
Axe

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

  • Approche 1 - Viewport - longueurs en pourcentage

    Dans les navigateurs pris en charge , vous pouvez utiliser viewport-length length tels que height: 100vh. 

    Où 100vh représente la hauteur de la fenêtre d'affichage, tout comme 100vw représente la largeur.

    Exemple ici

    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>

  • Approche 2 - Positionnement fixe

    Cette approche est assez simple. Il suffit de définir le positionnement de l’élément fixed et d’ajouter une heightwidth de 100%.

    _/Exemple ici

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

  • Approche 3

    Pour cette dernière méthode, il suffit de définir la height de la bodyhtml/iframe éléments sur 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>

149
Josh Crozier

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 serez doué:

<!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%; }
41
Rudie

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 correspond à la hauteur de la fenêtre. En outre, la largeur pourrait être définie sur 100vw, bien que des problèmes se posent si le fichier source est réactif (votre cadre deviendra très large).

27
NotJay

Cela a très bien fonctionné pour moi (uniquement si le contenu d'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>
25
Ivan

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

6
Heitor Giacomini

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>

5
khoa

Complément à la réponse de Akshit Soota: il est important de définir explicitement la hauteur de chaque élément parent, ainsi que de la table et de 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>
2
Brabbeldas

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>
2
Tariq Javed

Selon https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , les valeurs en 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. Donc, window.innerHeight a été utilisé. Vous pouvez également utiliser css pixels pour la hauteur.

Code de travail: Lien Site de travail: Lien

1
Agnel Vishal

Voici un code concis. Elle repose sur une méthode jQuery pour rechercher la hauteur actuelle de la fenêtre. Lors du chargement de l'iFrame, la hauteur de l'iframe est identique à celle de la fenêtre actuelle. Ensuite, pour gérer le redimensionnement de la page, la balise body a 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/

1
BraveNewMath

Le travail 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>
1
Uma Shankar Goel

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);" ....
0
T.Todua

http://embedresponsively.com/

C’est une excellente ressource qui a très bien fonctionné les quelques fois où je l’ai utilisée. 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>
0
Tom Witherington

Une autre façon de générer un plein écran fluide iframe:

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

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

Exemple:

CSS et code 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>

0
D.A.H