Ik kreeg een vraag in een interview dat “wat is het verschil tussen de css height:100%
en height:auto
?”
Kan iemand het uitleggen?
Antwoord 1, autoriteit 100%
height: 100%
geeft het element 100% hoogte van zijn bovenliggende container.
height: auto
betekent dat de hoogte van het element afhangt van de lengte van de onderliggende items.
Beschouw deze voorbeelden:
hoogte: 100%
<div style="height: 50px">
<div id="innerDiv" style="height: 100%">
</div>
</div>
#innerDiv
krijgt height: 50px
hoogte: automatisch
<div style="height: 50px">
<div id="innerDiv" style="height: auto">
<div id="evenInner" style="height: 10px">
</div>
</div>
</div>
#innerDiv
krijgt height: 10px
Antwoord 2, autoriteit 2%
Een hoogte van 100%voor is vermoedelijk de hoogte van het binnenvenster van uw browser, want dat is de hoogte van het bovenliggende venster, de pagina. Een auto
hoogteis de minimale hoogtevan die moet bevatten.
Antwoord 3
De standaard is height: auto
in de browser, maar height: X%
Definieert de hoogte als percentage van het bevattende blok.
Antwoord 4
height:100% werkt als de bovenliggende container een opgegeven hoogte-eigenschap heeft, anders werkt het niet