Iframe couper la plupart de son contenu à l'intérieur d'un <div>

Je suis en train d'intégrer des graphiques à partir de la FRED Économique de la Réserve dans mon site web, et il affiche en haut à gauche du graphique, mais il coupe le reste du contenu.

Ici est la partie de la index.html fichier qui place l'iframe:

<div class="box" id="retailbox">
    <iframe src="http:////research.stlouisfed.org/fred2/graph/graph-landing.php?g=GEt" frameborder="0" scrolling="no" onload="" allowtransparency="true"></iframe>
</div>

Voici les parties pertinentes de la CSS:

#retailbox {
    border: solid #a08db7;
    position: absolute;
    margin: 38% 53% auto;
}

Voici une capture d'écran du problème: Iframe couper la plupart de son contenu à l'intérieur d'un <div>

J'ai essayé d'ajouter ce peu de css à partir d'un autre sujet et modifier le code html en conséquence en vain:

div#content iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

Modifier:
Quand je permet le défilement, l'iframe est clairement la bonne taille pour les div, c'est juste de ne pas montrer plus de contenu.
Merci d'avance, j'espère que je suis juste une faute d'inattention.

InformationsquelleAutor user3483203 | 2014-07-30
  1. 4

    Voici un JSFiddle avec un exemple de travail. J'ai enlevé la marge, comme il a été ennuyeux à déboguer avec.

    #retailbox {
    border: solid #a08db7;
    height: 500px;
    width: 500px;
    position: relative;
}
iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

    En gros:

    1. Vous aviez un problème avec votre sélecteur de ne pas choisir quelque chose div#content iframe n'existe pas.
    2. Configuration de height: 100%; et width: 100%; sur un élément qui n'a pas un proche parent avec un ensemble de largeur/hauteur de sorte qu'il n'avait rien à calculer à partir de.
    • Merci beaucoup, cela fonctionne parfaitement. Je n'ai pas changer quoi que ce soit dans le n ° de la boîte de détail en raison de la façon dont le reste du site fonctionne, mais quand j'ai ajouté votre iframe partie, il a parfaitement fonctionné. Merci aussi pour l'explication, je ne suis pas très à l'aise avec le html ou le css et vous l'explique bien.
    • Oh, encore mieux! Content que ça fonctionne 🙂
    InformationsquelleAutor speak
  2. 1

    Vous devez donner l'iframe style des recommandations sur l'affichage lui-même. Il ne se développe pas à contenir son contenu:

    #frame {
    height: 100%;
    width: 100%;
position: absolute; 


}

    http://jsfiddle.net/3RKg7/

    InformationsquelleAutor regretoverflow