Faire Iframe pour s'adapter à 100% des conteneurs restants de hauteur

Je veux concevoir une page web avec une bannière et un iframe. J'espère que l'iframe peut remplir tout le reste de la hauteur de la page et être redimensionnées automatiquement tant que le navigateur est en cours de redimensionnement. Est-il possible de le faire sans avoir à écrire de code Javascript, uniquement avec du CSS?

J'ai essayé de définir height:100% sur iframe, le résultat est assez proche, mais l'iframe essayé de remplir toute la hauteur de la page, y compris la 30px hauteur de la bannière élément div, je me suis donc inutile de barre de défilement verticale. Il n'est pas parfait.

Notes de mise à jour: Excusez-moi pour ne décrit pas la question, j'ai essayé CSS margin, padding attribut sur les DIV à occuper l'ensemble de la remining hauteur d'une page web avec succès, mais l'astuce ne fonctionne pas sur iframe.

HTML:

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

Toute idée est apprécié.

InformationsquelleAutor Darkthread | 2008-11-28

191

Mise à jour en 2019

TL;DR: aujourd'Hui, la meilleure option est la dernière dans cette réponse - flexbox. Tout le supporte très bien et a pendant des années. Aller pour cela et ne pas regarder en arrière. Le reste de cette réponse est de gauche, pour des raisons historiques.

Le truc, c'est de comprendre ce que le 100% est prise de. La lecture des spécifications CSS peut vous y aider.

Pour faire une longue histoire courte, il ya une telle chose comme "bloc contenant" - qui n'est pas nécessaire de l'élément parent. Autrement dit, c'est le premier élément de la hiérarchie qui a une position:relative ou position:absolute. Ou le corps de l'élément lui-même si il n'y a rien d'autre. Donc, quand vous dites "width: 100%", il vérifie la largeur de la "bloc contenant" et définit la largeur de votre élément de la même taille. Si il y avait quelque chose d'autre là-bas, alors vous pourriez obtenir le contenu d'un "bloc contenant" qui sont plus grand que lui-même (et donc de "déborder").

Hauteur fonctionne de la même manière. À une exception près. Vous ne pouvez pas obtenir à hauteur de 100% de la fenêtre du navigateur. Le très haut niveau de l'élément, contre lequel à 100% peut être calculée, est le corps (ou html? pas sûr) de l'élément, et qui s'étend juste assez pour contenir son contenu. La spécification hauteur:100% sur qu'il n'aura aucun effet, car il n'a pas de "parent de l'élément" permettant de mesurer les 100%. De la fenêtre elle-même ne compte pas. 😉

De faire quelque chose d'étirement exactement 100% de la fenêtre, vous avez deux choix:

L'Utilisation De JavaScript

N'utilisez pas de DOCTYPE. Ce n'est pas une bonne pratique, mais cela met les navigateurs en "mode quirks", dans laquelle vous pouvez faire height="100%" sur les éléments et il va s'étirer à la taille de la fenêtre. Notez que le reste de votre page va probablement être modifiées pour tenir compte de l'DOCTYPE changements.

Mise à jour: je ne suis pas sûr si je n'étais pas mal déjà quand j'ai posté, mais c'est certainement dépassée aujourd'hui. Aujourd'hui, vous pouvez le faire dans votre feuille de style: html, body { height: 100% } et il va en fait s'étirer à l'ensemble de votre fenêtre. Même avec un DOCTYPE. min-height: 100% pourrait également être utile, en fonction de votre situation.

Et je ne conseillerais à personne de faire un quirks mode document de plus, soit parce qu'elle engendre la manière plus de maux de tête que les résout eux. Chaque navigateur est différent quirks mode, de sorte que l'obtention de votre page pour rechercher de manière cohérente à travers les navigateurs devient deux ordres de grandeur plus difficile. Utiliser un DOCTYPE. Toujours. De préférence, le HTML5 un <!DOCTYPE html>. C'est facile à retenir et fonctionne comme un charme sur tous les navigateurs, même les 10 années précédentes.

La seule exception est lorsque vous avez à l'appui de quelque chose comme IE5 ou quelque chose. Si vous êtes là, vous êtes sur votre propre, de toute façon. Ces anciens navigateurs ne sont rien comme les navigateurs d'aujourd'hui, et peu de conseils qui sont donnés ici va vous aider avec eux. Sur le côté positif, si vous êtes là, vous avez probablement juste de soutenir UN type de navigateur, qui se débarrasse des problèmes de compatibilité.

Bonne chance!

Mise à jour 2: Hey, ça faisait longtemps! 6 ans plus tard, de nouvelles options sont sur la scène. Je viens d'avoir une discussion dans les commentaires ci-dessous, voici d'autres astuces pour vous qui travaillent aujourd'hui dans les navigateurs.

Option 1 - positionnement absolu. Agréable et propre pour quand vous savez que les précis de la hauteur de la première partie.

CSS:
```
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;}
```
HTML:
```
<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>
```
Quelques notes - le second-row conteneur est nécessaire parce que bottom: 0 et right: 0 ne fonctionne pas sur des iframes pour une raison quelconque. Quelque chose à faire avec un "remplacé" élément. Mais width: 100% et height: 100% fonctionne très bien. display: block est nécessaire parce que c'est un inline élément par défaut et espace commence à créer bizarre débordements autrement.

Option 2 - tables. Si vous ne connaissez pas la hauteur de la première partie. Vous pouvez utiliser soit réelle <table> de tags ou de le faire de la façon élégante avec display: table. Je vais aller pour la dernière parce qu'elle semble être à la mode ces jours.

CSS:
```
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;}
```
HTML:
```
<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>
```
Quelques notes - le overflow: auto permet de s'assurer que la ligne comprend toujours tout de son contenu. Sinon éléments flottants peuvent parfois déborder. Le height: 100% sur la deuxième ligne permet de s'assurer qu'il se développe autant qu'il peut en serrant la première ligne aussi petit qu'il obtient.

Option 3 - flexbox. Le plus propre de tous, mais avec une moins que stellaire prise en charge du navigateur. IE10 aurez besoin -ms- préfixes pour la flexbox propriétés, et rien de moins ne soutiendra pas du tout.

CSS:
```
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; }
```
HTML:
```
<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>
```
Quelques notes - le overflow: hidden est parce que l'iframe génère toujours une sorte de dépassement de même avec display: block dans ce cas. Il n'est pas visible dans la vue plein écran ou l'extrait de l'éditeur, mais la petite fenêtre d'aperçu obtient un supplément de barre de défilement. Aucune idée de ce que c'est, les iframes sont bizarres.
- Eh bien, c'est une recommandation du W3C. Et c'est même pas le pire, non pas par un long chemin.
- Donc, ne nous mettez dans la feuille de style de l'IFrame de la page, ou la feuille de style de la page parent qui contient l'IFrame?
- le css a été à l'origine principalement un langage de formatage de texte avec une mise de base de la fonctionnalité qui était encore réellement centrées sur le texte - il s'est avéré être mieux que des tableaux pour la mise en page donc c'est l'adoption, à bien des égards, nous avons été le piratage mises en depuis
- Non, les tables ont généralement été beaucoup mieux pour la mise en page. Ils travaillent de façon uniforme dans tous les navigateurs. La seule raison pour laquelle CSS a disposition aspects, c'est qu'il a été conçu par des sociopathes.
- css fonctionne de manière cohérente à travers les navigateurs si vous savez ce que vous faites, la structure de base reste est du début du css; tables d'autre part de provoquer une marque de soupe et faites-le glisser beaucoup d'afficher des trucs dans le code HTML, ce qui est incorrect
- À mon humble avis, quand vous voulez les dispositions fluides (qui choisir leur taille en fonction de la taille de leur contenu et les éléments frères influencer les uns les autres), puis les tables sont à peu près la seule solution. Bien sûr, vous pouvez faire display:table-layout, mais vous aurez juste remplacer une étiquette de soupe avec un autre, parce que toutes les balises pour les tableaux/lignes/cellules seront encore nécessaires. Là encore, ces dispositions sont assez rares, et dans mon expérience, 90% des cas peuvent être résolus sans avoir recours à des tables.
- Néanmoins, ce n'est plus très loin hors-sujet, ne pensez-vous pas? 🙂
- Oui, c'est hors sujet, mais l'original de la déclaration sur les tables n'était pas moi et c'était si loin de la marque en 2015, j'ai dû dire quelque chose. Je n'ai jamais rencontré une situation, sauf pour les données tabulaires c'est mieux fait avec des tables, si vous pouviez me montrer un je serais très intéressé
- Eh bien, comment à ce sujet: faire un menu horizontal avec une liste de liens les uns à côté des autres. Les liens sont fournis de manière dynamique, de sorte que vous ne connaissez pas à l'avance ce qu'ils sont. Le menu doit être visible en même temps si il n'y a pas assez d'espace horizontal, le texte devrait commencer l'emballage dans certains articles. Pas de défilement horizontal est autorisé, à moins que quelque chose d'autre dans la page de forces. Aussi, certains liens peuvent avoir des retours à la ligne dans les. Tous les liens doivent avoir une bordure visible et tous ces "zones" doivent être à la même hauteur. Le texte devrait être centrée verticalement.
- Notez que l'emballage peut également être mis en place lorsque l'utilisateur démarre le redimensionnement de la fenêtre du navigateur. Toutes les cases doivent modifier leur hauteur simultanément, et le texte devrait être maintenu à la verticale centrée, dans chacun d'eux.
- il semble que vous ne faites que décrire une barre horizontale nav qui se comporte exactement comme une ligne de la table. C'est un excellent exemple de bonne utilisation de l'affichage de la table des propriétés css. Ce serait vous laisser l'occasion de marquer le code HTML dans une beaucoup plus de bon sens: <nav><ul><li> serait commun. De cette façon, vous êtes à l'aide de votre marque jusqu'à correctement marquer le contenu et le css pour tirer dans les propriétés d'affichage que vous avez besoin, plutôt que de piratage d'une table dans le mark-up de sorte que vous pouvez bénéficier de l'affichage des effets secondaires. C'est de la sémantique, accessible balisage, la séparation des préoccupations et de l'unique concepteur satisfaits
- Oui, mais, comme je l'ai dit, maintenant que vous avez tout simplement remplacer le tag de la soupe pour un autre. Vous êtes toujours à l'aide d'un tableau (le navigateur processus en tant que tel), mais juste à confondre les imprudents code responsable, c'est se faire passer pour un <nav><ul><li>. Je ne vois pas tout ce que vous avez gagné. C'est toujours un tableau, par un autre nom.
- J'ai utilisé de la bonne marque pour la navigation, je n'ai pas confondu le responsable, car ils vont trouver de navigation dans le balisage pour la navigation, et qui n'ont confondu mécanique HTML processeurs, de nouveau pour la même raison. Imaginez si j'ai utilisé des tables pour tout sur une page web? Comment serait difficile à maintenir? Ce n'est pas la soupe de tags, parce que chaque balise est là pour une raison, avec un but: nav pour marquer la zone comme un panneau de navigation; et UL et LI à l'occasion d'une liste non ordonnée. Le navigateur utilise la table comme les propriétés d'affichage, mais c'est tout.
- Eh bien... il se sent juste mal. C'est comme prendre un <a> et à l'aide de CSS pour le faire fonctionner comme <input type="text">; ou modification d'un <img> à fonctionner comme un <form>, etc. Pensez à la confusion, ce qui permettrait de créer si quelqu'un pouvait le faire avec les CSS. Cette display:table-cell est la même chose. Je ne sais pas pourquoi il a été ajouté à CSS comme ça, mais je n'aime pas la capacité de redéfinir ce que la balise ne juste en CSS. L'apparence, la mise en page - oui. Mais pas de la fonctionnalité.
- oui, une propriété css comme action: post; aurait tort; la chose est cependant, que les tables n'ont aucune fonctionnalité. Entrées et Que les deux ont des fonctionnalités et agissent comme des balises de marquage: une entrée actes dans le cadre d'un poteau; un rendu d'un lien hypertexte; mais une table ne fait rien, c'est juste de mark-up. En fait, Comme les Entrées et les deux ont des styles attachée trop, nous en débarrasser à l'aide de réinitialisation.css habituellement. Ce que vous êtes suggère, c'est un peu comme à l'aide d'un Un pour marquer le texte parce que vous souhaitez qu'il soit par défaut (bleu). Les propriétés d'affichage d'un tableau appartenant à la section de code qui définit la façon dont le site a l'air.
- et de grâce, il y a une nuance à votre argument qui pourraient être manqués par une baignoire-panpan qui a m'a vraiment fait réfléchir ce matin 🙂
- vous êtes les bienvenus. 🙂 Sur des tables est juste la mise en page - je suis... pas si sûr. Eh bien, je suppose... mais c'est et de tri avancées de mise en page que rien d'autre ne vient près de. En essence, sans rapport avec les éléments affectent les uns les autres la taille. Partout ailleurs, il y a une relation parent-enfant entre les deux éléments d'affecter leur taille. Mais pas dans les tableaux. Colspans/rowspans le rendre encore plus compliqué. Et puis il y a la chose à propos de display: table-head-group qui en fait imprimer sur chaque page. N'est-ce pas de fonctionnalités supplémentaires, pas seulement de la mise en page?
- Tous ces "naïfs" styles n'aide pas pour iframe, malheureusement.
- Il fonctionne pour moi. body, html, iframe {width: 100%; height: 100%; border: none; padding: 0; margin: 0} - et vous avez une pleine page de l'iframe. Ce qui ne fonctionne pas pour vous?
- Oui, mais la double barre de défilement est un peu regrettable: jsbin.com/rixakir/edit?html,css,output
- Ah, attendez, j'ai oublié ce que la question initiale était d'environ. 🙂 Voici une solution, à l'aide de positionnement absolu (mon préféré). Vous pouvez également obtenir un effet similaire à l'aide d'un <table> ou display: table-row qui permet un redimensionnement dynamique au prix d'un peu de performance. De toute façon, l'idée de base dans tous les d'entre eux sont - créer certains wrapper éléments qui s'étendent de la façon dont vous avez besoin, et ensuite la position de l'iframe à l'intérieur avec width: 100%; height: 100%; margin: 0; padding: 0; border: none.
- Le problème avec le positionnement absolu, si je vois bien, c'est que, dans la pratique, vous ne savez pas où mettre le haut et le bas. La hauteur du premier conteneur est simplement déterminée par son contenu, donc je ne vois pas de moyen fiable de définir sa hauteur, ni le haut de l'iframe contenant. Voici ma tentative de supprimer ces paramètres et le résultat est l'ensemble de l'iframe n'est plus: jsfiddle.net/t1h0zwoq
- Tu veux dire que la deuxième ligne est parti? De toute façon, si la taille de la première panneau n'est pas connu, alors vous pouvez utiliser ce tableau truc que j'ai parlé. Voici un exemple: jsfiddle.net/t1h0zwoq/2. J'style de la <div>s tables et de les faire s'étirer en tant que de besoin. Le overflow:auto sur la première ligne permet de s'assurer qu'il sera toujours étirer à son contenu. Le height: 100% sur la deuxième ligne signifie qu'il va s'étirer de tout ce qui est à gauche après la première ligne. Et le display:block sur le <iframe> est parce que par défaut c'est inline et donc de l'espace commence à créer bizarre débordements.
- Et, effectivement, n'oublions pas le bon vieux flexbox. C'est en fait la solution la plus propre: jsfiddle.net/t1h0zwoq/3 rappelez-vous, prise en charge du navigateur n'est pas que stellaire, en particulier si vous êtes intéressé dans les anciennes versions d'IE. IE10 besoins de la -ms- préfixe et IE9 ne le supporte pas du tout. Autres que que c'est génial.
- C'est génial, merci! La flexbox le plus propre en effet, mais les tables sont également intéressants pour apprendre et semblent fonctionner sans les débordements: jsfiddle.net/dmitri14/1uqh3zgx/2
- J'ai mis à jour la réponse aussi. Et, oui, il est possible que quelques-uns de ces overflows ne sont pas nécessaires. Mais vérifiez par vous-même - aujourd'hui, j'ai moi-même appris que iframes sont beaucoup plus pointilleux que cela puisse paraître à première vue.
- Merci beaucoup pour la mise à jour! Il est capricieux, en effet, qui aurait été la raison de cette question, je suppose. Oui, les deux overflows peut être retirée avec le tout fonctionne à merveille avec presque pas de css: jsfiddle.net/dmitri14/1uqh3zgx/3
- Il pourrait être intéressant de déplacer les dernières mises à jour en haut de cette réponse. J'ai dû passer à travers tout cela pour arriver à la meilleure réponse, flexbox.
- Assez vrai. Ajout d'une note au début de cette réponse.
InformationsquelleAutor Vilx-

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: ifm est l'iframe ID

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

InformationsquelleAutor MichAdel

45

Une autre façon de faire serait d'utiliser le position: fixed; sur le nœud parent.

Si je ne me trompe pas, position: fixed; liens de l'élément de fenêtre d'affichage, ainsi, une fois que vous donnez à ce nœud width: 100%; et height: 100%; propriétés, il s'étendra sur tout l'écran. À partir de ce point, vous pouvez mettre <iframe> balise à l'intérieur d'elle et s'étendent sur l'espace restant (à la fois en largeur et en hauteur) avec de simples width: 100%; height: 100%; instruction CSS.

Exemple de code

CSS:
```
    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:
```
   <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>
```
- Comment est-ce prendre le "reste" de la hauteur..?
- J'ai remarqué, vous devez également ajouter position: fixed de l'iframe.
- merci, fixe mon rapport SSRS hauteur out, suicide évité pour un autre jour.
- il n'y a pas de barres de défilement visible
- parfait - pourriez-vous expliquer le css " >' eg div#root > iframe furtheras je suis pas familier avec elle et ne peut pas trouver de référence
- De toute façon pour activer les barres de défilement trop
InformationsquelleAutor D1SoveR

Vous pouvez le faire avec DOCTYPE, mais vous devez utiliser les table. Check this out:

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

au moins, il n'a pas besoin de js!! mais est-ce web-safe?
inconvénient de cette solution est que html,body{overflow:hidden;} va supprimer la page défile.
J'essaye d'ajouter un pied de page dans le code ci-dessus, mais le pied de page ne s'affiche pas. pouvez-vous s'il vous plaît aider.

InformationsquelleAutor ducu

33

Ici sont quelques approches modernes:
- Approche 1 - Combinaison de fenêtre d'affichage des unités relatives /calc().
  
  L'expression calc(100vh - 30px) représente le reste de la hauteur. Où 100vh est la hauteur du navigateur et de l'utilisation de calc() efficacement déplace la hauteur de l'autre élément.
  
  Exemple
  
  CSS:
```
body {
    margin: 0;
}
.banner {
    background: #f00;
    height: 30px;
}
iframe {
    display: block;
    background: #000;
    border: none;
    height: calc(100vh - 30px);
    width: 100%;
}
```
  HTML:
```
<div class="banner"></div>
<iframe></iframe>
```
  Soutien pour calc() ici; le soutien aux fenêtre d'affichage des unités relatives ici.
- Approche 2 - Flexbox approche
  
  Exemple
  
  Définir la display de la commune de parent de l'élément de flex, avec flex-direction: column (en supposant que vous souhaitez utiliser pour les éléments de la pile sur le dessus les uns des autres). Puis définissez flex-grow: 1 sur l'enfant iframe élément pour remplir l'espace restant.
  
  CSS:
```
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;
}
```
  HTML:
```
<div class="parent">
    <div class="banner"></div>
    <iframe></iframe>
</div>
```
  Depuis, cette approche a moins de soutien¹, je vous conseille d'aller avec cette démarche.
¹_{Mais il semble que cela fonctionne dans Chrome/FF, il ne fonctionne pas sous IE (la première méthode fonctionne dans tous les navigateurs).}
- Approche 1 semblait fonctionner assez bien pour moi.
- Tant de travail et de l'OMI, les deux options mentionnées ici sont la meilleure approche. Je préfère le flexbox option, car avec calc vous besoin de connaître la quantité d'espace à déduire de la vh. Avec flexbox un simple flex-grow:1 t-il.
InformationsquelleAutor Josh Crozier
17

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

Notre iFrame est chargé à l'intérieur d'un div, donc j'ai besoin de quelque chose d'autre alors la fenêtre.hauteur de. Et de voir notre projet s'appuie déjà lourdement sur jQuery, j'ai trouvé que cela soit la solution la plus élégante:
```
$("iframe").height($("#middle").height());
```
Où bien sûr "#middle" est l'id de la div. La seule petite chose que vous devez faire est de rappeler ce changement de taille lorsque l'utilisateur redimensionne la fenêtre.
```
$(window).resize(function() {
    $("iframe").height($("#middle").height());
});
```
InformationsquelleAutor Tim Geerts
7

Voici ce que j'ai fait. J'ai eu le même problème et a terminé la recherche sur le web pour les ressources 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 tête de la section.

Veuillez noter que mon iframe est situé à l'intérieur de la cellule du milieu d'un tableau de 3 lignes et 1 colonne.
- Votre code ne fonctionnera que soit le TD contenant l'IFRAME a la hauteur:100%. Il ne fonctionnera que si le tableau est contenu dans un élément DIV, parce que vous avez un style pour tous les divs pour avoir la hauteur:100%.
InformationsquelleAutor Danut Milea

MichAdel code fonctionne pour moi, mais j'ai fait quelques modifications mineures à 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;

InformationsquelleAutor asimrafi

4

essayez ce qui suit:
```
<iframe name="" src="" width="100%" style="height: 100em"/>
```
il a travaillé pour moi
- Ne pas remplir le parent, met juste une grande hauteur sur l'iframe.
InformationsquelleAutor sree
3

C'est bon, vous montrez un iframe avec 100% de la hauteur de respect à son conteneur: le corps.

Essayez ceci:
```
<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, de changer la hauteur de la deuxième div à la hauteur que vous voulez.
- 30px + de 90% != 100%
- Ups! Vous avez raison! Ma solution n'est pas valide :$
- Mais, j'ai préféré cette réponse par @ARemesal. C'est assez simple, mais fonctionnelle. Merci
- pourrait utiliser calc(100% - 30px) au lieu de 90%
InformationsquelleAutor ARemesal

Vous pouvez le faire en 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>

InformationsquelleAutor vdbuilder

Nouveau en HTML5: Utiliser calc (sur la 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>

InformationsquelleAutor Stefan Steiger

2

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

Prendre 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>
```
Changer la div extérieure à utiliser display:table et de s'assurer qu'il a une largeur et une hauteur définie.
```
.outer {
  display: table;
  height: 100%;
  width: 100%;
}
```
Faire la bannière d'une table-row et réglez sa hauteur à ce que votre préférence est:
```
.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}
```
Ajouter une div autour de votre iframe (ou le contenu que vous avez besoin) et en faire une table-row avec la hauteur fixée à 100% (réglage de sa hauteur est essentiel si vous souhaitez intégrer une iframe pour remplir la hauteur)
```
.iframe-container {
  display: table-row;
  height: 100%;
}
```
Ci-dessous est un jsfiddle montrant à l'œuvre (sans iframe parce que cela ne semble pas fonctionner dans le violon)

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

InformationsquelleAutor daamsie
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 essayé de remplir la page entière", eh bien, quand a "100%" pas été à la hauteur de "tout"?

Vous avez demandé l'iframe pour remplir la totalité de la hauteur de son conteneur (qui est le corps), mais malheureusement, il a un bloc de niveau de la fratrie dans le <div> au-dessus de qui vous avez demandé d'être 30px grand. De sorte que le conteneur parent total est maintenant posée à la taille à 100% + 30px > 100%! Donc les barres de défilement.

Ce que je pense que vous dire que vous souhaiteriez que l'iframe à consommer ce qui est à gauche comme les cadres et les cellules du tableau peut, c'est à dire height="*". IIRC ce qui n'existe pas.

Malheureusement, à ma connaissance, il n'existe pas de moyen efficace pour mélanger/calculer/soustraire absolue et relative des unités non plus, donc je pense que vous êtes réduit à deux options:
1. Absolument position de votre div, qui
  va le prendre hors du récipient,
  l'iframe seront les seuls à consommer de l'
  conteneurs de hauteur. Cela vous laisse
  avec toutes sortes d'autres problèmes
  bien, mais peut-être que ce que vous êtes
  faire de l'opacité ou l'alignement serait
  ok.
2. Sinon, vous devez spécifier un
  % de la hauteur de la div et de réduire la
  hauteur de l'iframe par beaucoup.
  Si la hauteur absolue est vraiment
  importantes que vous aurez besoin d'appliquer
  qui à un élément enfant de l'élément div
  au lieu de cela.
InformationsquelleAutor annakata

Avoir essayé le css route pendant un certain temps, j'ai fini par écrire quelque chose assez simple en jQuery qui 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é avec IE8, Chrome, Firefox 3.6

InformationsquelleAutor benb

Il travaillera avec mentionnées ci-dessous code

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

InformationsquelleAutor mallikgm

Similaire réponse de @MichAdel, mais je suis en utilisant 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

InformationsquelleAutor Roy Shmuli

0

Vous pouvez le faire par la mesure de la taille du corps de la charge/événements de redimensionnement et le réglage de la hauteur de la (pleine hauteur - hauteur de la bannière).

Noter qu'actuellement, dans IE8 Bêta 2 vous ne pouvez pas faire ce onresize que cet événement est actuellement cassé dans IE8 Bêta 2.

InformationsquelleAutor scunliffe
0

ou vous pouvez aller à la vieille école et de l'utilisation d'un jeu de cadres peut-être:
```
<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>
```
- Vrai, mais, frameset fonctionne uniquement pré-html5.
- Non, c'est seulement valide pré-html5. Je parie qu'il fonctionne toujours. 😉
InformationsquelleAutor Amir Arad
0

Alors que je suis d'accord JS semble une meilleure option, j'ai un peu de CSS seule solution de travail. L'inconvénient, c'est que si vous devez ajouter du contenu à votre iframe document html fréquemment, vous devrez adapter un pourcentage dans le temps.

Solution:

Essayer de ne pas spécifier la hauteur de vos documents html,
```
html, body, section, main-div {}
```
alors seulement ce code:
```
#main-div {height:100%;}
#iframe {height:300%;}
```
remarque: la div doit être votre principal la section.

Cela devrait relativement de travail. l'iframe ne calcule précisément de 300% de la fenêtre visible de la hauteur. Si vous contenu html à partir de la 2e document (dans l'iframe) est plus petit en hauteur de 3 fois votre navigateur hauteur, il fonctionne. Si vous n'avez pas besoin d'ajouter du contenu fréquemment pour que ce document est une solution permanente, et vous pourriez juste trouver votre propre % nécessaires selon votre contenu à la hauteur.

Cela fonctionne, car elle empêche la 2ème html document (embed) pour hériter de sa hauteur de frome le parent document html. Il la prévient que nous n'avons pas spécifier une hauteur de deux d'entre eux. Lorsque l'on donne un % à l'enfant regarde à son parent, si pas, il prend son contenu à la hauteur. Et seulement si les autres récipients ne sont pas donnés hauteurs, de ce que j'ai essayé.
- Il ne fonctionne que dans google Chrome, la pensée...
InformationsquelleAutor pixelfe
0

La "transparente" attribut est une nouvelle norme visant à résoudre ce problème:

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

Lors de l'affectation de cet attribut, il va supprimer les frontières et les barres de défilement et de la taille de l'iframe pour son taille du contenu.
si c'est uniquement pris en charge en Chrome et dernier Safari

plus à ce sujet ici:
HTML5 iFrame Transparente Attribut
- Transparente attribut a été retiré de HTML 5 spec.
InformationsquelleAutor user2254487

Un simple jQuery solution

L'utiliser dans un script à l'intérieur de la iframed page

$(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();
    }

}

InformationsquelleAutor UnLoCo

0

tu ne peux pas régler la hauteur de l'iframe en % parce que votre parent hauteur de corps n'est pas à 100%, afin de rendre le parent hauteur de 100% et ensuite appliquer iframe hauteur de 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>
```
InformationsquelleAutor Pravin Abhale
0

Si vous avez accès au contenu de l'iframe qui sera chargé, vous pouvez dire à ses parents pour redimensionner chaque fois qu'il change..
```
    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");
```
Si vous avez plus d'un iframe sur la page, vous pouvez avoir besoin d'utiliser des id ou d'autres intelligent méthodes pour améliorer .find("iframe"), de sorte que vous choisissez la bonne.

InformationsquelleAutor Stephen
0

Je pense que le meilleur moyen d'atteindre ce scénario à l'aide de css position. jeu de position par rapport à votre div parent et position:absolute pour votre iframe.

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

iframe{
  position:absolute;
  width:100%;
  height:100%;
}
```
HTML:
```
<div class="container">
  <iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
 </iframe>
</div>
```
pour d'autres rembourrage et de la marge question maintenant un jours css3 calc() est très avancé et surtout compatible avec tous les navigateurs ainsi.

vérifier calc()

InformationsquelleAutor Jay Patel
0

Pourquoi ne pas le faire (avec ajustement mineur pour le corps de rembourrage/marges)
```
<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>
```
- Vous avez besoin de remplacer -0 avec +'px' à la fin. Fonctionne-t-il mobile?
InformationsquelleAutor access_granted

Vous devez vous connecter pour publier un commentaire.

Mise à jour en 2019

Ici sont quelques approches modernes:

Approche 1 - Combinaison de fenêtre d'affichage des unités relatives /calc().

Approche 2 - Flexbox approche

Approche 1 - Combinaison de fenêtre d'affichage des unités relatives /`calc()`.