mon intérieur Pourquoi s'affiche-t-il à l'extérieur du parent div si j'ai défini la largeur à 100% et Marge / Rembourrage est défini sur 0PX? P> Merci d'avance p> p> #div_mainpanel code> est de 100% de largeur, mais si vous regardez le coin droit, il est sur le parent div. J'ai essayé de supprimer largeur: 100 code> à partir du problème de la div et du problème de largeur est résolu, mais pas de hauteur.
<div id="div_mainContainer">
<div id="div_mainPanel"></div>
</div>
5 Réponses :
C'est parce que l'attribut frontière passe sur les 100% ... même que la valeur de rembourrage.
thats pourquoi son 2px out.
Les frontières comptent pour les calculs de dimensionnement. Votre div inner div tire 100% de la hauteur / largeur du parent, de sorte qu'il devient 500x300, mais ajoute ensuite 2px tout autour de la frontière, donc c'est vraiment 502x302 et fuit sur la bordure du parent sur les bords droit / bas.
Une observation mineure: s'il ajoute une frontière 2PX tout autour, la taille devient 504x304. :)
Ceci est un comportement correct. L'INTERV DIV est réglé sur 100% de largeur du parent, mais cela n'inclut pas la bordure à ce sujet, il est donc de 100% + 2px.
Pour empêcher l'interne DIV étant affiché en dehors des limites du parent, ajoutez Tableau de la boîte: Boîte à bordure Code> au parent et à l'enfant: p>
p>
<div id="div_mainContainer"> <div id="div_mainPanel"></div> </div>
La propriété frontière n'est pas calculée dans la largeur de la boîte non plus. Votre boîte est donc en train d'être calculée comme 100% + 2px pour la frontière. Pour la largeur, supprimez simplement la largeur Si vous utilisez toujours une hauteur exacte sur le conteneur parent, pourquoi ne pas simplement utiliser une hauteur exacte de 498px sur l'enfant, qui calculera une hauteur totale de 500px pour l'enfant. : 100% car une division (élément de niveau de bloc) sera déjà développée pour remplir automatiquement la largeur du conteneur, mieux qu'une largeur de 100% peut faire (parce qu'il considérera le rembourrage, la frontière et la marge).
Il existe maintenant un moyen bien meilleur de résoudre ce problème: Utilisez http://paulirish.com/2012/box-sizing-border -box-ftw /
maintenant Border-Box Dimensage de votre CSS:
100% sera un moyen beaucoup plus naturel de définir des tailles d'éléments enfants.
Merci à tous pour le temps que vous m'avez accordé!