Differenza tra CSS Altezza superiore 100% vs Altezza automatica

"Altezza: 100%"Imposta l'altezza dei contenitori di divieto figlio in base a quello del contenitore genitore. Questo valore di proprietà imposta l'altezza del figlio esattamente uguale all'altezza definita nell'elemento genitore. Ma quando "Altezza: auto"Viene utilizzato per un elemento, imposterà l'altezza del valore degli elementi figlio piuttosto che ereditare il valore dall'elemento genitore.

Questo blog distinguerà tra CSS "altezza: 100%" e "altezza: auto".

Come funziona "altezza: 100%" in HTML?

La definizione di un numero qualsiasi di percentuali come altezza dell'elemento figlio regolerà l'altezza di conseguenza. Quindi, un'altezza del 100% imposterà l'altezza dell'elemento figlio in modo tale da coprire completamente l'area dell'elemento genitore. Ad esempio, impostare il “altezza"Dell'elemento bambino a"50%"(Altezza: 50%) imposterà l'altezza dell'elemento figlio come metà dell'elemento genitore.

Esempio: applicazione della proprietà "altezza: 100%" a un'immagine
Comprendiamo l'applicazione dell'altezza: 100% in un codice HTML:

Nel frammento di codice sopra:

• Per l'elemento Div, il valore della proprietà dell'altezza CSS è definito come "200px".
• All'interno del Div c'è un "img"Elemento impostato come elemento figlio dell'elemento contenitore div sopra. La sua altezza è impostata su “100%"(Altezza: 100%). Ciò significa che l'altezza dell'immagine verrà impostata in base al valore pixel definito nel contenitore di div genitore, i.e., "200px".

Questo genererà il seguente output:

Ora, se cambiamo il valore della proprietà di altezza nell'elemento Parent Div (ad esempio, da 200px a 300px), imposterà la dimensione dell'immagine su "300px":

Questo cambierà l'altezza dell'immagine in "300px"E l'immagine verrà visualizzata in questo modo:

Come funziona la proprietà "Altezza: auto" in HTML?

IL "Altezza: auto"La proprietà imposta l'altezza dell'elemento figlio sul valore definito in quell'elemento figlio. Ad esempio, se esiste un elemento genitore che ha l'altezza "300px"E ha un elemento figlio con" altezza: auto ". Quindi, all'interno di quell'elemento (contenente "altezza: auto"), tutti gli elementi figlio avranno l'altezza in base alla definizione. Più specificamente, l'elemento figlio non erediterà il valore dall'elemento genitore.

Esempio: applicazione della proprietà "Altezza: auto" a un'immagine
Comprendiamo questo con un semplice esempio di frammento di codice HTML:

Nel frammento di codice sopra:

• Qui, abbiamo aggiunto un elemento del contenitore div con l'attributo di stile e la proprietà CSS in linea come “Altezza: 300px".
• All'interno dell'elemento del contenitore Div, esiste un altro contenitore div con la proprietà in stile CSS impostato come "auto".
• All'interno del secondo elemento Div, un "img"Element viene aggiunto (figlio dell'elemento div sopra). Ha l'attributo di stile con la proprietà di altezza con il valore impostato su "250px".
• Ciò significa che l'altezza dell'immagine verrà impostata su "250px" perché il suo elemento genitore ha "altezza: auto".

Produzione

Ora, se cambiamo il valore di "altezza"Proprietà del bambino Div, cambierà anche l'altezza dell'immagine nell'output di conseguenza:

Questo imposterà l'altezza dell'immagine come "150px"Nell'output:

Questo riassume la differenza tra CSS "Altezza: 100%"Vs"Altezza: auto".

Conclusione

Il CSS "Altezza: 100%"Imposta l'altezza dell'elemento esattamente come quello definito nel suo elemento genitore. D'altra parte, quando il "Altezza: auto"È usato in un elemento, imposta l'altezza dei suoi elementi figlio come definito negli elementi figlio e non eredita l'altezza dall'elemento genitore. Questo post ha discusso della differenza tra CSS "Altezza: 100%" e "Altezza: auto".