Pomoc w programowaniu, odpowiedzi na pytania / Css / Czy wysokość elementu ciała nie jest domyślnie 100% jego kontenera w normalnym układzie statycznego pozycjonowania? - css

Czy wysokość elementu ciała nie jest domyślnie 100% jego kontenera w normalnym układzie statycznego pozycjonowania? - css

Do tej pory zakładałem, że domyślnie, zgodnie z normalnym zachowaniem układu, <body> element wypełniony w 100% wysokości pojemnika <html> element nawet wtedy, gdy position: static było ustawione.

Jednak prosty eksperyment okazał się błędny i byłem zszokowany.

Rozumiem, że przy zachowaniu normalnego układu wysokości elementów blokowych są elastyczne i rozciągają się, aby wypełnić całą ich zawartość. Jednak z jakiegoś powodu myślałem, że nie dotyczy to <body> element.

W moim prostym eksperymencie mam następujący kod HTML:

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>

Jeśli wyjdę position: absolute; skomentowany tak, jak jest teraz, a następnie domyślnie, w układzie statycznym, ciało zachowuje się jak każdy inny element bloku i jest tylko tak wysoki, aby wypełnić jego zawartość, ignorując reguły height: 100%; i min-height: 100%. Wygląda jak na poniższym obrazku.

Jeśli jednak zmienię pozycję na absolute, tj. jeśli odkomentuję następujące elementy:

position: absolute;
left: 22%;

Wtedy oczywiście jest posłuszny height: 100%; min-height: 100% zasady. Następnie wypełnia całą wysokość przeglądarki w ten sposób:

Czy to normalne zachowanie? Czy to <body> element zachowuje się tak samo jak każdy inny element bloku w odniesieniu do jego reguł układu, zwł. w odniesieniu do jego wysokości?

Odpowiedzi:

2 dla odpowiedzi № 1

TL; DR: Tak, to jest normalne zachowanie.

Jednak.

Dawno, dawno temu, był starszy standard, w którym ciało miało domyślnie wysokość rzutni. Dawno temu.

Ponadto niektóre niejasne funkcje HTML mogą wprowadzać w błąd. Jeśli nie ustawisz background-color własność html element, tło body zostanie „odziedziczony” przez html, aby całe okno miało takie tło, aby wyglądało, jakby ciało zajmowało całe okno, co nie jest przypadkiem!

0 dla odpowiedzi nr 2

Gdy jest statyczne, ma rodzica, który jest html i kiedy używasz statycznego pozycjonowania w tym przypadku, myśli on w rodzicu. html domyślnie jak każdy inny blok height: auto więc jeśli zmienisz to na 100%, stanie się to zgodnie z oczekiwaniami.

body ma rodzica html i buduj jego rozmiary według rodzica.