J’ai supposé jusqu’à présent que, par défaut, selon le comportement normal de la mise en page, le <body> élément rempli à 100% de la hauteur du conteneur <html> élément même quand position: static a été mis en.
Cependant, une simple expérience a prouvé que mon hypothèse était fausse et j'ai été choqué.
Je comprends que, dans le comportement normal de la disposition, les éléments de bloc "les hauteurs sont élastiques et s’étirent de manière à remplir tout leur contenu. Cependant, pour une raison quelconque, j’ai pensé que cela ne s’appliquait pas à la <body> élément.
Donc, dans mon expérience simple, j'ai le code HTML suivant:
html {
background-color: white;
}
body {
width: 50%;
background-color: gray;
margin: 0 auto;
min-height: 100%;
height: 100%;
/* position: absolute;
left: 22%; */
}<h1>Nice sounds</h1>
<p>Zoo zoo zoo</p>
<p>Koo koo koo</p>
<p>Boo boo boo</p>
<p>Poo poo poo</p>Si je quitte le position: absolute; commenté comme il est en ce moment, puis par défaut, dans la présentation statique, le corps se comporte comme tout élément de bloc et est aussi grand que son contenu, en ignorant les règles height: 100%; et min-height: 100%. Cela ressemble à l'image ci-dessous.
Si, toutefois, je change le positionnement en absolute, c’est-à-dire si je ne commente pas ce qui suit:
position: absolute;
left: 22%;
Alors bien sûr, il obéit à la height: 100%; min-height: 100% règles. Il remplit ensuite toute la hauteur du navigateur de la manière suivante:
Est-ce le comportement normal? Est-ce que le <body> élément se comporte comme tout élément de bloc en ce qui concerne ses règles de présentation, notamment par rapport à sa hauteur?
Réponses:
2 pour la réponse № 1TL; DR: Oui, c'est le comportement normal.
Toutefois.
Il était une fois une norme plus ancienne où body avait la hauteur de la fenêtre par défaut. Il y a longtemps.
De plus, certaines fonctionnalités obscures de HTML peuvent compliquer les choses. Si vous ne définissez pas le background-color propriété du html élément, le fond de body sera "hérité" par html, de sorte que toute la fenêtre ait ce fond, donnant l’impression que le corps occupe toute la fenêtre, ce qui n’est pas le cas!
0 pour la réponse № 2
Quand il est statique, il a un parent qui est html et quand vous utilisez le positionnement statique dans ce cas, cela pense au sein du parent. html par défaut comme n'importe quel autre bloc height: auto Donc, si vous changez cela à 100%, cela devient comme vous le souhaitiez.
body a un parent html et construire ses tailles en fonction de son parent.