verschil tussen css hoogte: 100% vs hoogte: auto

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: autobetekent 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>

#innerDivkrijgt height: 50px

hoogte: automatisch

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

#innerDivkrijgt 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 autohoogteis de minimale hoogtevan die moet bevatten.


Antwoord 3

De standaard is height: autoin 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

Other episodes