Réglage de la hauteur de l'iframe à 100% semble débordement de la div contenant

J'ai une page HTML simple avec une barre latérale flottait à la gauche et tout le contenu à droite. Dans la zone de contenu principal, j'ai un <iframe>. Cependant, lorsque j'utilise le CSS pour définir la hauteur de l'image à 100%, il semble déborder le contenant div pour une raison quelconque, résultant dans une petite quantité d'espace blanc après le contenu de mon.

Ici est mon contenu HTML:

<div id="container">
    <div id="sidebar">
        <p>Sidebar content</p>
    </div>
    <div id="content">
        <iframe id="contentFrame"></iframe>
    </div>
</div>

Et voici mon CSS:

html, body {
    height: 100%;
}

#container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: grey;
}

#sidebar {
    width: 100px;
    float: left;
    background-color: blue;
    height: 100%;
}

#content {
    margin-left: 100px;
    height: 100%;
    background-color: yellow;
}

#contentFrame {       
    border: none;
    padding: 0;
    margin: 0;
    background-color: pink;
    height: 100%;
}

(NOTE: Avant que quelqu'un demande, #container { position: absolute } est nécessaire pour des raisons de mise en page; je ne peux pas le changer.)

Vous pouvez voir "travailler" sur ce violon: http://jsfiddle.net/9q7yp/

Le but est de se débarrasser de la bande blanche en bas de la page (c'est à dire qu'il ne faut pas être une verticale de la barre de défilement dans la suite). Si j'ai mis overflow: hidden pour #content le problème disparaît. Je suis heureux de faire cela si nécessaire, mais je ne peux pas pour la vie de moi pourquoi il ne fonctionne pas sans cela. Quelqu'un peut me dire pourquoi?

OriginalL'auteur FixMaker | 2012-10-04

18

Essayez d'ajouter
```
display:block;
```
à la iframe. http://jsfiddle.net/9q7yp/14/

Modifier:

Bien, il s'avère qu'il y a une meilleure solution (à la fois dans la pratique et dans la compréhension de ce qui se passe):

Ajouter
```
vertical-align:bottom;
```
à iframe#contentFrame. http://jsfiddle.net/9q7yp/17/

<iframe>, comme un inline élément a la valeur initiale de vertical-align:baseline, mais un height:100% élément inline "poussera" la ligne de base de quelques pixels plus bas (car à l'origine, la référence est à quelques pixels plus haut à partir du bas),

de sorte que le parent DIV, c'est penser "bien le contenu sera de 2 pixels plus bas, j'ai besoin de faire de la place pour".

Vous pouvez voir cet effet dans ce violon (vérifiez votre navigateur de la console et de prêter attention à la bottom propriété de deux ClientRect objet).

Bien fait 🙂 Maintenant, si vous pouvez expliquer ce qu'il se passe je serai heureux d'accepter votre réponse.
Vérifier mes mises à jour post 🙂
Excellent, complet description. Merci.

OriginalL'auteur Passerby
1

Ajouter margin:0 à corps
```
html, body {
    height: 100%;
  margin:0 auto; 
}
```
De TRAVAIL DÉMO

Merci. C'est étrange, si votre démo semble fonctionner, mais si je l'applique à mon violon, jsfiddle.net/tRhCC/1), il ne le fait pas. Aucune idée pourquoi? ...aussi le jsbin l'aperçu en direct ne fonctionne pas: jsbin.com/uwilod/4
Je n'ai pas accès à jsfiddle que mon réseau admin bloque certains des fichiers js de jsfiddle m désolé 😉 mais si vous pouvez le créer sur un autre site comme jsbin etc .. peut-b je peux essayer
avez-vous regarder le jsbin lien que j'ai compris? Le problème est toujours là.
ajouter #contentFrame {position: absolute; }dans votre contentFrame CSS. raison pour qui n'est pas clair pour moi. trouverez et quand j'aurai le temps.
À l'aide de position:absolute va "flotter" le iframe de div lors du calcul de la taille, ce qui signifie div#content est maintenant 0px dans le contenu de la hauteur. Vous pouvez voir si vous retirez le height:100% dans div#content. C'est pourquoi la barre de défilement disparaît.

OriginalL'auteur Champ
0

Ajouter margin: 0 à votre html, body {} section.

OriginalL'auteur colons
0

...................démo

Salut maintenant donner à overflow:hidden; de cet id #content

comme ce
```
#content{
overflow:hidden;
}
```
Démonstration en direct

Merci, mais vous remarquerez que dans le texte d'origine de ma question je l'ai mentionné, j'ai déjà essayé et ça fonctionne. Cependant, je veux savoir pourquoi il est nécessaire (c'est à dire pourquoi l'iframe débordement de la div?).

OriginalL'auteur Rohit Azad

Vous devez vous connecter pour publier un commentaire.