Div débordement avec rembourrage en chrome

Quelqu'un peut-il expliquer pourquoi je reçois un débordement vertical avec ce code s'il vous plaît?Div débordement avec rembourrage en chrome

<html> 
    <body style="width:120px; height:120px; background-color:white;"> 
     <div style="padding:20px; background-color:blue;"> 
      <div style="width:100%; height:100%; background-color:white"> 
       <div style="padding:20px; background-color:green;"> 
        <div style="width:100%; height:100%; background-color:white"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

En Chrome 8, il rend comme ceci:

alt text

Source

2011-01-19 rob

Je suppose que vous voulez regarder comme il le fait, mais avec la frontière verte ne dépassant à l'extérieur du bleu, et le tout à l'intérieur 120px * 120px.

Vous ne spécifiez pas de doctype dans ce code, il devient donc difficile de faire fonctionner les choses entre différents navigateurs - certains navigateurs tomberont en "mode quirks".

Avec le code que vous avez donné, IE8 étend par exemple la disposition à la largeur de la fenêtre.

La première étape pour le faire paraître cohérent est d'ajouter un type de document, comme le doctype HTML5:

<!DOCTYPE html>

Ajoutant que lui donne une apparence cohérente entre Chrome, IE8, Firefox, Opera:

..mais il fait aussi mal regarder, et il n'y a aucun moyen simple de le réparer parce que vous essayez de mélanger % et px MeasureMe base nts (une solution simple serait d'utiliser seulement % ou juste px). L'utilisation de height: 100% et padding: 20px rendra l'élément trop grand car sa hauteur totale sera le remplissage plus la hauteur de l'élément parent (c'est la raison de votre "débordement").

est donc ici un nouveau code, qui donne l'effet visuel que vous recherchez en utilisant une autre méthode:

Live Demo

<!DOCTYPE html> 
<html> 
<body style="width:120px; height:120px"> 
    <div style="background:blue; width:100%; height:100%; position:relative"> 
     <div style="background:green; position:absolute; top:20px; right:20px; bottom:20px; left:20px"> 
      <div style="background:white; position:absolute; top:20px; right:20px; bottom:20px; left:20px"></div> 
     </div> 
    </div> 
</body> 
</html>

Source

2011-01-19 19:16:27 thirtydot

Parfait! Merci! – rob

Vous êtes les bienvenus :) – thirtydot

J'ai cherché cette réponse pour les 3 dernières heures. Merci 1000 fois plus !!! – jcmitch

La réponse que vous cherchez peut être trouvé sur cette page:

Iframe 100% height inside body with padding

En bref, HTML5 vient à la rescousse. Ajouter ce CSS à votre DIV et le problème est résolu:

box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;

Source

2011-12-05 11:57:17 Scott

Div débordement avec rembourrage en chrome

Répondre

Questions connexes