différence entre la hauteur css: 100% vs la hauteur: auto

167

On m'a posé une question lors d'une interview "Quelle est la différence entre le CSS height:100%et height:auto?"

Quelqu'un peut-il expliquer?

css

— Gowsikan
source

236

height: 100% donne à l'élément 100% de la hauteur de son conteneur parent.

height: auto signifie que la hauteur de l'élément dépendra de la hauteur de ses enfants.

Considérez ces exemples:

hauteur: 100%

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

#innerDiv va avoir height: 50px

hauteur: auto

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

#innerDiv va avoir height: 10px

— Manish Mishra
source

5

Je pense que dans le cas de 'height: auto #innerDiv sera 10px + the size it needs for its own content- voir ce jsfiddle

— BornToCode

@Manish Mishra: Quel est le meilleur design réactif? Définir la hauteur de l'élément enfant ou de l'élément conteneur et laisser l'autre dériver sa hauteur?

— John Strood

@Djack, tout dépend de l'apparence, de la sensation et du comportement que vous attendez de votre conception sur différents écrans, et en conséquence vous écrivez votre css. Il n'existe pas de règle globale générique telle que setting the height of the child element or the container element. Vous pouvez faire tout ce que vous avez à faire pour réaliser votre conception, à condition de respecter une certaine cohérence, d'éviter les doublons, de réduire les retouches, de regrouper les mises en page courantes. En bref, il doit y avoir un système / modèle dans votre travail, de sorte qu'il soit facile à lire et à modifier, et bien sûr le fait qu'il fonctionne

— Manish Mishra

2

Je pense qu'une bonne façon de penser à l'automobile est de `` déstabiliser '' la hauteur - c'est comme ne pas l'avoir réglée.

— niico

1

J'ai modifié le violon que BornToCode a partagé ci-dessus, pour le rendre plus évident qui autofait grandir l'élément pour s'adapter à la fois à son contenu ET au contenu de son enfant. En revanche, une valeur de hauteur fixe n'augmente pas (ou n'affiche) pas le contenu qui ne peut pas tenir dans la hauteur déclarée. jsfiddle.net/m3f8y6xr/1 Cette réponse, je crois, n'est pas suffisamment formulée pour faire croire que l'élément va grandir pour inclure tout le contenu, qu'il s'agisse de son propre texte ou du contenu d'un enfant. Bien sûr, on peut affirmer que son propre texte est aussi un enfant. Cela fournit une confirmation visuelle du comportement.

— SherylHohman

5

Une hauteur de 100% pour est vraisemblablement la hauteur de la fenêtre intérieure de votre navigateur , car c'est la hauteur de son parent , la page. Une autohauteur sera la hauteur minimale de nécessaire pour contenir .

— Rohit Azad
source

3

Ce n'est pas nécessairement correct si l'élément parent est un élément avec une hauteur définie qui ne correspond pas à la taille de la fenêtre du navigateur

— goonerify

1

La valeur par défaut est height: autodans le navigateur, mais height: X%définit la hauteur en pourcentage du bloc conteneur.

— Vahid Heydarinezhad
source

0

height: 100% fonctionne si le conteneur parent a une propriété de hauteur spécifiée sinon, cela ne fonctionnera pas

— Chukwuemeka
source