Faire Iframe pour s'adapter à 100% de la hauteur restante du conteneur

260

Je veux concevoir une page Web avec une bannière et un iframe. J'espère que l'iframe peut remplir toute la hauteur de page restante et être redimensionné automatiquement lors du redimensionnement du navigateur. Est-il possible de le faire sans écrire de code Javascript, uniquement avec CSS?

J'ai essayé de définir height:100%iframe, le résultat est assez proche, mais l'iframe a essayé de remplir toute la hauteur de la page, y compris la 30pxhauteur de l'élément div de la bannière, donc j'ai obtenu une barre de défilement verticale inutile. Ce n'est pas parfait.

Notes de mise à jour : Excusez-moi de ne pas bien décrire la question, j'ai essayé la marge CSS, l'attribut de remplissage sur DIV pour occuper toute la hauteur de remining d'une page Web avec succès, mais l'astuce n'a pas fonctionné sur iframe.

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>
Développer l'extrait

Toute idée est appréciée.

html css iframe Darkthread
la source

Réponses:

236

Mise à jour en 2019

TL; DR: Aujourd'hui, la meilleure option est la dernière de cette réponse - flexbox. Tout le supporte bien et depuis des années. Allez-y et ne regardez pas en arrière. Le reste de cette réponse est laissé pour des raisons historiques.

L'astuce consiste à comprendre de quoi est pris le 100%. La lecture des spécifications CSS peut vous y aider.

Pour faire une histoire courte - il existe une chose telle que "contenant un bloc" - qui n'est pas nécessairement l'élément parent. En termes simples, c'est le premier élément de la hiérarchie qui a position: relative ou position: absolue. Ou l'élément corps lui-même s'il n'y a rien d'autre. Ainsi, lorsque vous dites "largeur: 100%", il vérifie la largeur du "bloc contenant" et définit la largeur de votre élément à la même taille. S'il y avait quelque chose d'autre, alors vous pourriez obtenir le contenu d'un "bloc contenant" qui est plus grand que lui-même (donc "débordant").

La hauteur fonctionne de la même manière. À une exception près. Vous ne pouvez pas obtenir la hauteur à 100% de la fenêtre du navigateur. L'élément de niveau supérieur, par rapport auquel 100% peut être calculé, est l'élément body (ou html? Pas sûr), et qui s'étire juste assez pour contenir son contenu. Spécifier la hauteur: 100% dessus n'aura aucun effet, car il n'a pas "d'élément parent" par rapport auquel mesurer 100%. La fenêtre elle-même ne compte pas. ;)

Pour que quelque chose s'étire exactement à 100% de la fenêtre, vous avez deux choix:

  1. Utiliser JavaScript
  2. N'utilisez pas DOCTYPE. Ce n'est pas une bonne pratique, mais cela met les navigateurs en "mode excentrique", dans lequel vous pouvez faire height = "100%" sur les éléments et les étirer à la taille de la fenêtre. Notez que le reste de votre page devra probablement être modifié également pour s'adapter aux modifications de DOCTYPE.

Mise à jour: je ne sais pas si je ne m'étais pas déjà trompé lorsque j'ai posté cela, mais cela est certainement obsolète maintenant. Aujourd'hui, vous pouvez le faire dans votre feuille de style: html, body { height: 100% }elle s'étendra à l'ensemble de votre fenêtre. Même avec un DOCTYPE. min-height: 100%pourrait également être utile, selon votre situation.

Et je ne conseillerais à personne de créer un document en mode excentrique non plus, car cela provoque beaucoup plus de maux de tête que de les résoudre. Chaque navigateur a un mode bizarrerie différent, donc rendre votre page cohérente sur tous les navigateurs devient plus difficile de deux ordres de grandeur. Utilisez un DOCTYPE. Toujours. De préférence le HTML5 - <!DOCTYPE html>. Il est facile à retenir et fonctionne comme un charme dans tous les navigateurs, même ceux de 10 ans.

La seule exception est lorsque vous devez prendre en charge quelque chose comme IE5 ou quelque chose. Si vous y êtes, vous êtes quand même tout seul. Ces anciens navigateurs ne ressemblent en rien aux navigateurs d'aujourd'hui, et les petits conseils donnés ici vous aideront à les utiliser. Du côté positif, si vous y êtes, vous n'avez probablement qu'à prendre en charge UN type de navigateur, ce qui élimine les problèmes de compatibilité.

Bonne chance!

Mise à jour 2: Hé, ça fait longtemps! 6 ans plus tard, de nouvelles options font leur apparition. Je viens d'avoir une discussion dans les commentaires ci-dessous, voici d'autres astuces pour vous qui fonctionnent dans les navigateurs d'aujourd'hui.

Option 1 - positionnement absolu. Agréable et propre pour quand vous connaissez la hauteur précise de la première partie.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
  <p>Some text</p>
  <p>And some more text</p>
</div>
<div class="second-row">
  <iframe src="https://jsfiddle.net/about"></iframe>
</div>
Développer l'extrait

Quelques notes - le second-rowconteneur est nécessaire car bottom: 0et right: 0ne fonctionne pas sur les iframes pour une raison quelconque. Quelque chose à voir avec le fait d'être un élément "remplacé". Mais width: 100%et height: 100%fonctionne très bien. display: blockest nécessaire car c'est un inlineélément par défaut et les espaces commencent à créer des débordements étranges sinon.

Option 2 - tableaux. Fonctionne lorsque vous ne connaissez pas la hauteur de la première pièce. Vous pouvez utiliser des <table>balises réelles ou le faire de la manière la plus élégante avec display: table. Je vais opter pour ce dernier car il semble être à la mode ces jours-ci.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <div class="second-row">
    <iframe src="https://jsfiddle.net/about"></iframe>
  </div>
</div>
Développer l'extrait

Quelques notes - le overflow: autos'assure que la ligne inclut toujours tout son contenu. Sinon, les éléments flottants peuvent parfois déborder. Le height: 100%sur la deuxième rangée s'assure qu'il se dilate autant qu'il peut en serrant la première rangée aussi petite que possible.

Option 3 - flexbox. Le plus propre de tous, mais avec un support de navigateur moins que stellaire. IE10 aura besoin de -ms-préfixes pour les propriétés de la flexbox, et rien de moins ne le supportera pas du tout.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
Développer l'extrait

Quelques notes - overflow: hiddenc'est parce que l'iframe génère toujours une sorte de débordement même avec display: blockdans ce cas. Il n'est pas visible dans la vue plein écran ou dans l'éditeur d'extraits de code, mais la petite fenêtre d'aperçu dispose d'une barre de défilement supplémentaire. Aucune idée de ce que c'est, les iframes sont bizarres.

Vilx-
la source
@sproketboy Eh bien, c'est une recommandation du W3C. Et ce n'est même pas le pire, pas de loin.
John
Alors, mettons-nous cela dans la feuille de style de la page de l'IFrame ou dans la feuille de style de la page parent qui contient l'IFrame?
Mathias Lykkegaard Lorenzen
1
C'est génial, merci! La flexbox est la plus propre en effet, mais les tables sont également super à apprendre et semblent fonctionner sans les débordements: jsfiddle.net/dmitri14/1uqh3zgx/2
Dmitri Zaitsev
1
Il peut être utile de déplacer les dernières mises à jour en haut de cette réponse. J'ai dû passer par tout cela pour arriver à la meilleure réponse, flexbox.
forgivenson
2
@forgivenson - C'est vrai. Ajout d'une note au début de cette réponse.
Vilx
68

Nous utilisons un JavaScript pour résoudre ce problème; voici la source.

var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

Remarque: ifmest l'ID iframe

pageY() a été créé par John Resig (l'auteur de jQuery)

MichAdel
la source
50

Une autre façon de le faire serait d'utiliser le position: fixed;nœud parent.
Si je ne me trompe pas, position: fixed;lie l'élément à la fenêtre d'affichage, ainsi, une fois que vous avez donné ce nœud width: 100%;et ses height: 100%;propriétés, il s'étendra sur tout l'écran. À partir de ce moment, vous pouvez mettre une <iframe>balise à l'intérieur et l'étendre sur l'espace restant (en largeur et en hauteur) avec une simple width: 100%; height: 100%;instruction CSS.

Exemple de code

    body {
        margin: 0px;
        padding: 0px;
    }

    /* iframe's parent node */
    div#root {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* iframe itself */
    div#root > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }
   <html>
        <head>
            <title>iframe Test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
        <body>
            <div id="root">
                <iframe src="http://stackoverflow.com/">
                    Your browser does not support inline frames.
                </iframe>
            </div>
        </body>
    </html>
Développer l'extrait

D1SoveR
la source
1
Comment cela prend-il la hauteur "restante" ..?
EricG
3
J'ai remarqué que vous devez également ajouter position: fixedà l'iframe.
0xF
merci, correction de mon rapport SSRS, suicide évité pour un autre jour.
Mike D
1
il n'y a pas de barres de défilement visibles
andrej
parfait - pourriez-vous expliquer le css '>' par exemple div # root> iframe plus
loin car
40

Voici quelques approches modernes:

  • Méthode 1 - Combinaison de fenêtre unités relatives / calc().

    L'expression calc(100vh - 30px)représente la hauteur restante. Où 100vhest la hauteur du navigateur et l'utilisation de calc()déplace effectivement la hauteur de l'autre élément.

    Exemple ici

    body {
    margin: 0;
}
.banner {
    background: #f00;
    height: 30px;
}
iframe {
    display: block;
    background: #000;
    border: none;
    height: calc(100vh - 30px);
    width: 100%;
}
    <div class="banner"></div>
<iframe></iframe>
    Développer l'extrait

    Support pour calc()ici ; prise en charge des unités relatives aux fenêtres ici .

  • Approche 2 - Approche Flexbox

    Exemple ici

    Définissez l' displayélément parent commun sur flex, avec flex-direction: column(en supposant que vous souhaitez que les éléments s'empilent les uns sur les autres). Ensuite, définissez flex-grow: 1l' iframeélément enfant afin qu'il remplisse l'espace restant.

    body {
    margin: 0;
}
.parent {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.parent .banner {
    background: #f00;
    width: 100%;
    height: 30px;
}
.parent iframe {
    background: #000;
    border: none;
    flex-grow: 1;
}
    <div class="parent">
    <div class="banner"></div>
    <iframe></iframe>
</div>
    Développer l'extrait

    Étant donné que cette approche a moins de support 1 , je suggère de suivre l'approche susmentionnée.

1 Bien qu'il semble fonctionner dans Chrome / FF, il ne fonctionne pas dans IE (la première méthode fonctionne dans tous les navigateurs actuels).

Josh Crozier
la source
3
Le travail et l'OMI les deux options mentionnées ici sont la meilleure approche. Je préfère l' flexboxoption, car avec calcvous, vous devez connaître la quantité d'espace à déduire du vh. Avec flexboxun simple flex-grow:1fait ça.
Kilmazing
39

Vous pouvez le faire avec DOCTYPE, mais vous devez utiliser table. Regarde ça:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
    <tr><td class="header"><div><h1>Header</h1></div></td></tr>
    <tr><td class="content">
        <iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>
ducu
la source
1
au moins il n'a pas besoin de js !! mais est-il sûr pour le Web?
Ali Shakiba
1
L'inconvénient de cette solution est que html, body {overflow: hidden;} supprimera les parchemins de page.
Ali Shakiba
J'essaie d'ajouter le pied de page dans le code ci-dessus mais le pied de page n'est pas affiché. Peux-tu aider s'il te plait.
Akshay Raut
18

Peut-être que cela a déjà été répondu (quelques réponses ci-dessus sont des façons "correctes" de le faire), mais je pensais que j'ajouterais aussi ma solution.

Notre iFrame est chargé dans une div, donc j'avais besoin d'autre chose que window.height. Et vu que notre projet repose déjà fortement sur jQuery, je trouve que c'est la solution la plus élégante:

$("iframe").height($("#middle").height());

Où bien sûr "#middle" est l'id du div. La seule chose supplémentaire que vous devrez faire est de rappeler ce changement de taille chaque fois que l'utilisateur redimensionne la fenêtre.

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});
Tim Geerts
la source
7

Voici ce que j'ai fait. J'ai eu le même problème et j'ai fini par chercher des ressources sur le Web pendant des heures.

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

J'ai ajouté ceci à la section principale.

Veuillez noter que mon iframe est situé à l'intérieur de la cellule du milieu d'un tableau qui a 3 lignes et 1 colonne.

Danut Milea
la source
Votre code ne fonctionnera que si le TD contenant l'IFRAME a une hauteur: 100%. Cela fonctionnera si la table est contenue dans un élément DIV, car vous avez un style pour que toutes les divisions aient une hauteur: 100%.
Nikola Petkanski
6

Le code MichAdel fonctionne pour moi mais j'ai apporté quelques modifications mineures pour le faire fonctionner correctement.

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
    var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;
asimrafi
la source
4

C'est vrai, vous montrez une iframe à 100% de hauteur par rapport à son conteneur: le corps.

Essaye ça:

<body>
  <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
  <div style="width:100%; height:90%; background-color:transparent;">
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
    </iframe> 
  </div>
</body>

Bien sûr, changez la hauteur du deuxième div à la hauteur souhaitée.

ARemesal
la source
8
30px + 90%! = 100%
stepancheg
1
pourrait utiliser calc (100% - 30px) au lieu de 90%
Justin E
4

essayez ce qui suit:

<iframe name="" src="" width="100%" style="height: 100em"/>

ça a marché pour moi

sree
la source
4
Ne remplit pas le parent, met juste une grande hauteur sur l'iframe.
Ben
3

Vous pouvez le faire avec html / css comme ceci:

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>
vdbuilder
la source
2

Nouveau en HTML5: utilisez calc (en hauteur)

<html style="width:100%; height:100%; margin: 0px; padding: 0px;">
<body style="width:100%; height:100%; margin: 0px; padding: 0px;">
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http://www.google.com.tw" style="width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>
Stefan Steiger
la source
2

J'ai utilisé display: table pour résoudre un problème similaire. Cela fonctionne presque pour cela, laissant une petite barre de défilement verticale. Si vous essayez de remplir cette colonne flexible avec autre chose qu'un iframe, cela fonctionne bien (pas

Prenez le code HTML suivant

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
    </div>
  </div>
</body>

Modifiez le div externe pour utiliser display: table et assurez-vous qu'il a une largeur et une hauteur définies.

.outer {
  display: table;
  height: 100%;
  width: 100%;
}

Faites de la bannière une ligne de tableau et définissez sa hauteur quelle que soit votre préférence:

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

Ajoutez une div supplémentaire autour de votre iframe (ou du contenu dont vous avez besoin) et faites-en une ligne de tableau avec une hauteur définie sur 100% (la définition de sa hauteur est critique si vous souhaitez intégrer une iframe pour remplir la hauteur)

.iframe-container {
  display: table-row;
  height: 100%;
}

Ci-dessous, un jsfiddle le montrant au travail (sans iframe car cela ne semble pas fonctionner au violon)

https://jsfiddle.net/yufceynk/1/

daamsie
la source
1

Je pense que vous avez un problème conceptuel ici. Dire "J'ai essayé de régler la hauteur: 100% sur iframe, le résultat est assez proche mais l'iframe a essayé de remplir toute la page" , eh bien, quand "100%" n'est-il pas égal à "entier"?

Vous avez demandé à l'iframe de remplir toute la hauteur de son conteneur (qui est le corps), mais malheureusement, il a un frère au niveau du bloc dans la <div> au-dessus duquel vous avez demandé une taille de 30 pixels. Il est donc maintenant demandé au total du conteneur parent de dimensionner à 100% + 30 px> 100%! D'où les barres de défilement.

Je pense que vous voulez dire que vous souhaitez que l'iframe consomme ce qui reste comme les cadres et les cellules du tableau, c'est-à-dire height = "*". IIRC cela n'existe pas.

Malheureusement, à ma connaissance, il n'y a aucun moyen de mélanger / calculer / soustraire efficacement les unités absolues et relatives, donc je pense que vous êtes réduit à deux options:

  1. Positionnez absolument votre div, ce qui le sortira du conteneur pour que l'iframe seul consomme sa hauteur de conteneur. Cela vous laisse cependant toutes sortes d'autres problèmes, mais peut-être que pour ce que vous faites, l'opacité ou l'alignement serait correct.

  2. Alternativement, vous devez spécifier un% de hauteur pour le div et réduire d'autant la hauteur de l'iframe. Si la hauteur absolue est vraiment aussi importante que vous devrez l'appliquer à un élément enfant de la div à la place.

annakata
la source
1

Après avoir essayé la route css pendant un certain temps, j'ai fini par écrire quelque chose d'assez basique dans jQuery qui a fait le travail pour moi:

function iframeHeight() {
    var newHeight = $j(window).height();
    var buffer = 180;     // space required for any other elements on the page 
    var newIframeHeight = newHeight - buffer;
    $j('iframe').css('height',newIframeHeight);    //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;
}

Testé dans IE8, Chrome, Firefox 3.6

Ben B
la source
1

Cela fonctionnera avec le code mentionné ci-dessous

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>
mgr
la source
1

Réponse similaire de @MichAdel, mais j'utilise JQuery et plus élégant.

<script type="text/javascript">
    $(document).ready(function() {
        var $iframe = $('#iframe_id')[0];

        // Calculate the total offset top of given jquery element
        function totalOffsetTop($elem) {
            return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
        }

        function resizeIframe() {
            var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
            height -= totalOffsetTop($iframe);
            $iframe.height = Math.max(0, height) + 'px';
        }

        $iframe.onload = resizeIframe();
        window.onresize = resizeIframe;
    });
</script>

iframe_id est l'ID de la balise iframe

Roy Shmuli
la source
0

Vous pouvez le faire en mesurant la taille du corps lors des événements de chargement / redimensionnement et en définissant la hauteur sur (pleine hauteur - hauteur de la bannière).

Notez qu'actuellement dans IE8 Beta2, vous ne pouvez pas faire cela sur une taille car cet événement est actuellement interrompu dans IE8 Beta2.

scunliffe
la source
0

ou vous pouvez aller à la vieille école et utiliser un jeu de cadres peut-être:

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
Amir Arad
la source
2
@vdbuilder: Non, c'est seulement valide avant html5. Je parie que ça marche toujours. ;-)
TJ Crowder
0

Bien que je convienne que JS semble être une meilleure option, j'ai une solution de travail quelque peu CSS. L'inconvénient est que si vous devez ajouter du contenu à votre document HTML iframe fréquemment, vous devrez adapter un pourcentage de temps d'attente.

Solution:

Essayez de ne pas spécifier de hauteur pour vos DEUX documents html,

html, body, section, main-div {}

alors ne codez que ceci:

#main-div {height:100%;}
#iframe {height:300%;}

note: le div doit être votre section principale.

Cela devrait fonctionner relativement. l'iframe calcule exactement 300% de la hauteur de la fenêtre visible. Si le contenu html du 2e document (dans l'iframe) est plus petit que 3 fois la hauteur de votre navigateur, cela fonctionne. Si vous n'avez pas besoin d'ajouter fréquemment du contenu à ce document, il s'agit d'une solution permanente et vous pouvez simplement trouver votre propre% nécessaire en fonction de la hauteur de votre contenu.

Cela fonctionne car il empêche le 2ème document html (celui incorporé) d'hériter de sa hauteur du document html parent. Cela l'empêche car nous n'avons pas spécifié de hauteur pour les deux. Lorsque nous donnons un% à l'enfant, il recherche son parent, sinon, il prend sa hauteur de contenu. Et seulement si les autres conteneurs n'ont pas de hauteur, d'après ce que j'ai essayé.

pixelfe
la source
0

Le " sans couture " attribut " est une nouvelle norme visant à résoudre ce problème:

http://www.w3schools.com/tags/att_iframe_seamless.asp

Lors de l'attribution de cet attribut, il supprimera les bordures et les barres de défilement et dimensionnera l'iframe à sa taille de contenu. bien qu'il ne soit pris en charge que dans Chrome et la dernière version de Safari

en savoir plus ici: HTML5 iFrame Seamless Attribute

user2254487
la source
L'attribut transparent a été supprimé de la spécification HTML 5.
Eric Steinborn
0

Une solution jQuery simple

Utilisez-le dans un script à l'intérieur de la page iframed

$(function(){

    if(window != top){
        var autoIframeHeight = function(){
            var url = location.href;
            $(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4);
        }
        $(window).on('resize',autoIframeHeight);
        autoIframeHeight();
    }

}
UnLoCo
la source
0

vous ne pouvez pas définir la hauteur de l'iframe en% car la hauteur du corps de votre parent n'est pas de 100%, alors définissez la hauteur du parent sur 100%, puis appliquez la hauteur de l'iframe à 100%

For eg.
<html>
<head>
<style>
html,body{height:100%}
</style> 
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>
Pravin Abhale
la source
0

Si vous avez accès au contenu de l'iframe qui sera chargé, vous pouvez dire à son parent de redimensionner chaque fois qu'il redimensionne.

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

Si vous avez plusieurs iframes sur la page, vous devrez peut-être utiliser des identifiants ou d'autres méthodes intelligentes pour améliorer .find ("iframe") afin de sélectionner la bonne.

Stephen
la source
0

Je pense que la meilleure façon de réaliser ce scénario en utilisant la position css. définir la position par rapport à votre parent div et position: absolue à votre iframe.

.container{
  width:100%;
  position:relative;
  height:500px;
}

iframe{
  position:absolute;
  width:100%;
  height:100%;
}
<div class="container">
  <iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
 </iframe>
</div>
Développer l'extrait

pour les autres problèmes de remplissage et de marge, un jour css3 calc () est très avancé et principalement compatible avec tous les navigateurs.

vérifier calc ()

Jay Patel
la source
0

Pourquoi ne pas le faire (avec un ajustement mineur pour le rembourrage / les marges du corps)

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
accès autorisé
la source
Vous devez remplacer -0par +'px'à la fin. Cela fonctionne-t-il sur mobile?
Dmitri Zaitsev