Hauteur iframe dans le problème de div

Je rencontre des problèmes d'ajustement de l'iframe dans la hauteur exacte de la div.
Le problème n'est pas que cela ne remplira pas la div complète, mais elle dépasse la div.

C'est ce que j'ai maintenant

CSSHauteur iframe dans le problème de div

*{margin:0;padding:0} 
html, body {height:100%;width:100%;position: relative;} 

#header { 
    height:100px; 
    width:100%; 
    background-color:#FF0000; 
} 

#left { 
    height:inherit; 
    width: 250px; 
    float:left; 
    background-color:#0000FF; 
} 
#right { 
    margin-left:250px; 
    background-color:#FFFF00; 
    height:inherit; 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="css.css" rel="stylesheet" type="text/css" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<div id="header"></div> 
    <div id="left"> 
     <!--<iframe src="http://www.microsoft.com" frameborder="1"></iframe>--> 
    </div> 
    <div id="right"> 
    </div> 
</body> 
</html>

Si vous affichez ce code dans IE (ou un autre navigateur), vous remarquerez que l'iframe est exactement 100px (la hauteur de l'en-tête) trop longtemps. Comment puis-je réparer cela? Tous les autres commentaires sur le code sont également appréciés.

MISE À JOUR !!
J'ai changé le code pour montrer la zone couverte par les div. Si vous visualisez ce code, vous verrez que les divs gauche (bleu) et droite (jaune) s'étendent au-delà de la zone d'écran 100%. Je veux qu'il reste dans la zone de l'écran (pas de défilement).

Source

2010-09-14 pinkpanther

Edit: essayez de définir vos divs comme ceci:

<div id="splitter"> 
    <div id="header"></div> 
    <div id="left"></div> 
    <div id="right"></div> 
</div>

et css comme ceci:

*{margin:0;padding:0} 
html, body {height:100%;width:100%;position: relative; 
} 

#splitter 
{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    height:100%; 
    padding-top:100px; 
    position:relative; 
} 
#header { 
    margin-top:-100px; 
    height:100px; 
    width:100%; 
    background-color:#FF0000; 
} 

#left { 
    height:inherit; 
    width: 250px; 
    float:left; 
    background-color:#0000FF; 
} 
#right { 
    margin-left:250px; 
    background-color:#FFFF00; 
    height:inherit; 
}

Qu'il arrive à travailler dans IE8 et Firefox, mais Chrome ne semblent prendre en charge la taille de la boîte, et explose.

Source

2010-09-15 02:14:56 david

Salut, merci pour la réponse. Il n'était en effet pas nécessaire de mettre l'iframe dans les balises de table. Malheureusement, mettre la position: relative dans #right n'a pas résolu le problème – pinkpanther

Il semble que ce que vous essayez de faire soit possédé par le modèle de boîte. CSS3 ajoute l'option de taille de boîte, qui le fixe, mais il semble que seulement ie8 le supporte (o_O) – david

Merci David pour votre aide. J'ai ajouté la ligne suivante à votre code dans #splitter: "-webkit-box-sizing: border-box;" cela va le faire fonctionner dans le chrome et l'opéra mais pas dans IE7. Je regarde la possibilité de déterminer la hauteur en utilisant javascript. Je verrai alors ce qui fonctionne le mieux pour moi. – pinkpanther

Vous pouvez également mettre à jour vos styles et ajouter un style pour iframe.

#frame_box 
{ 
    height:98%; 
    width: 250px; 
}

Mise à jour le code de cadre:

<iframe id="frame_box" src="http://www.microsoft.com" frameborder="1"></iframe>

Voici le jsFiddle pour votre code: Updated code.

Source

2013-09-13 05:36:06 Avdhut

Hauteur iframe dans le problème de div

Répondre

Questions connexes