Méthode de navigateur croisé pour ajuster une div enfant à la largeur de son parent

Question

Je recherche une solution pour intégrer un enfant div dans le width ses parents.

La plupart des solutions que j'ai vues ici ne sont pas compatibles avec plusieurs navigateurs (par exemple, display: table-cell; n'est pas pris en charge dans IE <=8 ).

Answer 1

Vous pouvez utiliser la box-sizing css, c'est un navigateur croisé (c'est-à-dire 8+ et tous les vrais navigateurs) et une très bonne solution pour de tels cas :

 #childDiv{
   box-sizing: border-box;
   width: 100%; //or any percentage width you want
   padding: 50px;
}

Violon

Answer 2

Si vous mettez position:relative; sur l'élément extérieur, l'élément intérieur se placera en fonction de celui-ci. Ensuite, un width:auto; sur l'élément intérieur sera le même que la largeur de l'extérieur.

Answer 3

A votre image, vous avez mis le rembourrage à l'extérieur de l'enfant. Ce n'est pas le cas. Le rembourrage ajoute à la largeur d'un élément, donc si vous ajoutez un rembourrage et que vous lui donnez une largeur de 100%, il aura une largeur de 100% + rembourrage. Pour obtenir ce que vous voulez, il vous suffit d'ajouter un remplissage au div parent ou d'ajouter une marge au div interne. Étant donné que les divs sont des éléments de niveau bloc, ils s'étendront automatiquement à la largeur de leur parent.

Answer 4

Vous n'avez même pas besoin de width: 100% dans votre div enfant :

http://jsfiddle.net/DanielDZC/w2mev/1/