Browserübergreifende Methode, um ein untergeordnetes Div an die Breite seines Elternteils anzupassen

72

Ich suche nach einer Lösung, um ein Kind divin das der Eltern zu integrieren width.

Die meisten Lösungen, die ich hier gesehen habe, sind nicht browserübergreifend kompatibel (z. B. display: table-cell;wird im IE nicht unterstützt <=8).

Bild zeigt das beabsichtigte Ergebnis, wobei ein untergeordnetes Div die volle Größe seines Elternteils hat und eine innere Polsterung aufweist

html css cross-browser parent-child mate64
quelle
1
Wenn ich Ihr Recht verstehe, deklarieren Sie dem Kind einfach nicht die Breite.
Ivan Ivanić

Antworten:

75

Die Lösung besteht darin, einfach nicht zu deklarieren width: 100%.

Die Standardeinstellung ist width: auto, dass für Elemente auf Blockebene (z. B. div) der ohnehin verfügbare "volle Speicherplatz" belegt wird (anders als dies der width: 100%Fall ist).

Siehe: http://jsfiddle.net/U7PhY/2/

Nur für den Fall, dass es aus meiner Antwort noch nicht klar ist: Setzen Sie widthdas Kind einfach nicht auf div.

Sie könnten stattdessen interessiert seinbox-sizing: border-box .

dreißig Punkte
quelle
3
Ich denke, es gibt nur ein Kind?
Ivan Ivanić
Ja, ich denke du hast recht. Das Diagramm verwirrte mich :( Zum Glück hatte ich bereits den "zweiten Teil" meiner Antwort geschrieben, und das ist die eigentliche Antwort hier.
dreißig Punkte
Sie müssen das width-Attribut für child überhaupt nicht deklarieren.
Daniel Gruszczyk
1
Es ist möglich, dass eine Stileigenschaft, die Teil einer Komponente ist, die Sie in Ihr Projekt aufgenommen haben, die widthEigenschaft festlegt und ein Problem verursacht. In diesem Fall explizit width: autofür das untergeordnete div festlegen .
StackOverflowUser
24

Sie können die box-sizingCSS-Eigenschaft verwenden, sie ist Crossbrowser (dh8 + und alle echten Browser) und eine ziemlich gute Lösung für solche Fälle:

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

Geige

Y.Puzyrenko
quelle
1

In Ihrem Bild platzieren Sie die Polsterung außerhalb des Kindes. Das ist nicht der Fall. Das Auffüllen erhöht die Breite eines Elements. Wenn Sie also das Auffüllen hinzufügen und ihm eine Breite von 100% geben, hat es eine Breite von 100% + Auffüllen. Um das zu erreichen, was Sie möchten, müssen Sie entweder dem übergeordneten Div einen Abstand hinzufügen oder dem inneren Div einen Rand hinzufügen. Da Divs Elemente auf Blockebene sind, werden sie automatisch auf die Breite ihres übergeordneten Elements erweitert.

Alex
quelle
Ich habe ein neues Bild hochgeladen - Entschuldigung für das schlechte Diagramm! Natürlich weiß ich, was Polsterung bedeutet;)
mate64
1

Wenn Sie position:relative;das äußere Element anlegen , platziert sich das innere Element entsprechend diesem. Dann entspricht a width:auto;am inneren Element der Breite des äußeren.

Steeven
quelle
Dann einfach entfernen width:100%;und die Box passt automatisch hinein.
Steeven