Forskjell mellom CSS -høyde topp 100% vs høyde auto

“Høyde: 100%”Setter høyden på Child DIV -containerne i henhold til den for overordnede beholderen. Denne eiendomsverdien setter høyden på barnet nøyaktig lik høyden som er definert i overordnet element. Men når "Høyde: Auto”Brukes til et element, det vil sette høyden på barnelementsverdien i stedet for å arve verdien fra overordnet element.

Denne bloggen vil skille mellom CSS “Høyde: 100%” og “Høyde: Auto”.

Hvordan fungerer “høyde: 100%” i ​​HTML?

Definere et hvilket som helst antall prosentvis som høyden på barnelementet vil justere høyden deretter. Så en 100% høyde vil sette høyden på barnelementet på en slik måte at det dekker området til overordnet element fullt ut. For eksempel å sette "høyde”Av barnelementet til“50%”(Høyde: 50%) vil sette høyden på barnelementet som halvparten av foreldreelementet.

Eksempel: Bruke "Høyde: 100%" -egenskaper på et bilde
La oss forstå bruken av høyden: 100% i en HTML -kode:

I ovennevnte kodebit:

• For DIV -elementet er CSS -høydeegenskapsverdien definert som "200px”.
• Inne i diven er det en "img”Element satt som barnelementet i ovennevnte div containerelement. Høyden er satt til “100%”(Høyde: 100%). Dette betyr at høyden på bildet vil bli satt i henhold til pikselverdien definert i overordnede div container, i.e., “200px”.

Dette vil generere følgende utgang:

Nå, hvis vi endrer verdien av høydeegenskapen i overordnet DIV -elementet (for eksempel fra 200px til 300px), vil den stille størrelsen på bildet til “300px”:

Dette vil endre bildehøyden til “300px”Og bildet vises slik:

Hvordan fungerer "høyden: auto" -egenskapen i HTML?

“Høyde: Auto”Eiendom setter høyden på barnelementet til verdien som er definert i det barneelementet. For eksempel, hvis det er et overordnet element som har høyden "300px”Og det har et barnelement med“ Høyde: auto ”. Deretter, inne i det elementet (som inneholder "høyde: auto"), vil alle barneelementene ha høyden i henhold til definisjonen. Mer spesifikt vil ikke barnelementet arve verdien fra overordnede element.

Eksempel: Bruke "Høyde: Auto" -egenskaper på et bilde
La oss forstå dette med et enkelt HTML -kodebit Eksempel:

I ovennevnte kodebit:

• Her har vi lagt til et div containerelement med stilattributtet og inline CSS -egenskapen som "Høyde: 300px”.
• Inne i Div Container -elementet er det en annen DIV -beholder med CSS -stilegenskapen som "bil”.
• Inne i det andre divelementet, en “img”Element er lagt til (barn av ovennevnte divelement). Den har stilattributtet med høydeegenskapen med verdien satt til “250px”.
• Dette betyr at høyden på bildet vil bli satt til “250px” fordi dets overordnede element har “høyde: auto”.

Produksjon

Nå, hvis vi endrer verdien av “høyde”Eiendom til Child Div, det vil også endre høyden på bildet i utgangen deretter:

Dette vil sette høyden på bildet som "150px”I utgangen:

Dette oppsummerer forskjellen mellom CSS “Høyde: 100%”VS”Høyde: Auto”.

Konklusjon

CSS “Høyde: 100%”Setter høyden på elementet nøyaktig som det som er definert i foreldreelementet. På den annen side, når "Høyde: Auto”Brukes i et element, det setter høyden på barnelementene som definert i barneelementene, og det arver ikke høyden fra overordnet element. Dette innlegget diskuterte forskjellen mellom CSS “høyde: 100%” og “Høyden: auto”.