Unterschied zwischen CSS-Höhe: 100% und Höhe: Auto

167

In einem Interview wurde mir die Frage gestellt: "Was ist der Unterschied zwischen CSS height:100%und height:auto?"

Kann jemand erklären?

css Gowsikan
quelle

Antworten:

236

height: 100% gibt dem Element 100% Höhe seines übergeordneten Containers an.

height: auto bedeutet, dass die Elementhöhe von der Höhe der untergeordneten Elemente abhängt.

Betrachten Sie diese Beispiele:

Höhe: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv wird haben height: 50px

Höhe: Auto

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv wird haben height: 10px

Manish Mishra
quelle
5
Ich denke, dass im Fall von 'height: auto #innerDiv 10px + the size it needs for its own content- siehe diese jsfiddle
BornToCode
@ Manish Mishra: Was ist das beste reaktionsschnelle Design? Festlegen der Höhe des untergeordneten Elements oder des Containerelements und Ableiten der Höhe des anderen Elements?
John Strood
@Djack, alles hängt davon ab, welches Aussehen, Verhalten und Verhalten Sie von Ihrem Design auf verschiedenen Bildschirmen erwarten, und dementsprechend schreiben Sie Ihre CSS. Es gibt keine generische globale Regel wie setting the height of the child element or the container element. Sie können alles tun, um Ihr Design zu erreichen, vorausgesetzt, Sie folgen einer bestimmten Konsistenz, vermeiden Doppelarbeit, reduzieren Nacharbeiten und gruppieren allgemeine Layouts. Kurz gesagt, es muss ein System / Muster für Ihre Arbeit geben, damit es leicht zu lesen und zu ändern ist, und natürlich die Tatsache, dass es funktionieren sollte
Manish Mishra
2
Ich denke, eine gute Art, über Auto nachzudenken, ist, dass Sie die Höhe „einstellen“ - es ist, als hätte man sie nicht eingestellt.
Niico
1
Ich habe die Geige, die BornToCode oben geteilt hat, geändert, um deutlicher zu machen, autodass das Element wächst, um sowohl seinen Inhalt als auch den Inhalt seines Kindes aufzunehmen. Im Gegensatz dazu vergrößert (oder zeigt) ein Wert für feste Höhe keinen Inhalt, der nicht in die deklarierte Höhe passt. jsfiddle.net/m3f8y6xr/1 Diese Antwort ist meines Erachtens nicht ausreichend formuliert, um deutlich zu machen, dass das Element alle Inhalte enthält, unabhängig davon, ob es sich um einen eigenen Text oder den Inhalt eines Kindes handelt. Natürlich kann argumentiert werden, dass sein eigener Text auch ein Kind ist. Dies bietet eine visuelle Bestätigung des Verhaltens.
SherylHohman
5

Eine Höhe von 100% für ist vermutlich die Höhe des inneren Fensters Ihres Browsers , da dies die Höhe des übergeordneten Fensters ist . Eine autoHöhe wird die sein , Mindesthöhe der erforderlichen enthalten .

Rohit Azad
quelle
3
Dies ist nicht unbedingt richtig, wenn das übergeordnete Element eines mit einer definierten Höhe ist, die nicht zur Größe des Browserfensters passt
goonerify
1

Die Standardeinstellung ist height: autoim Browser, height: X%definiert jedoch die Höhe in Prozent des enthaltenen Blocks.

Vahid Heydarinezhad
quelle
0

height: 100% funktioniert, wenn der übergeordnete Container eine bestimmte height-Eigenschaft hat. Andernfalls funktioniert dies nicht

Chukwuemeka
quelle