Допомога у програмуванні, відповіді на питання / Css / Чи висота елемента кузова за замовчуванням не є 100% його контейнера в статичному розташуванні нормальним розташуванням? - css

Чи висота елемента кузова за замовчуванням не є 100% його контейнера в статичному розташуванні нормальним розташуванням? - css

До цього часу я припускав, що за замовчуванням, відповідно до нормальної поведінки макета, <body> елемент заповнював 100% висоти контейнера <html> елемент навіть коли position: static було встановлено.

Однак простий експеримент виявив моє припущення неправильним, і я був шокований.

Я розумію, що в нормальній поведінці компонування елементи блоків "висоти є еластичними і розтягуються, щоб заповнити весь їхній вміст. Однак я чомусь подумав, що це не стосується <body> елемент

Отже, у своєму простому експерименті у мене є такий 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>

Якщо я залишу position: absolute; коментується так, як це саме зараз, то за замовчуванням у статичному макеті тіло поводиться так само, як і будь-який інший блок-елемент, і лише настільки високий, щоб заповнити його вміст, ігноруючи правила height: 100%; і min-height: 100%. Це виглядає як на малюнку нижче.

Якщо я змінив позиціонування на absolute, тобто якщо я відменюю таке:

position: absolute;
left: 22%;

Тоді, звичайно, він підкоряється height: 100%; min-height: 100% правила. Потім він заповнює всю висоту браузера так:

Це нормальна поведінка? Чи є <body> елемент поводиться так само, як і будь-який інший елемент блоку щодо правил його компонування, особливо щодо його висоти?

Відповіді:

2 для відповіді № 1

TL; DR: Так, це нормальна поведінка.

Однак

Колись був старіший стандарт, коли тіло за замовчуванням має висоту вікна перегляду. Дуже давно.

Також деякі незрозумілі функції HTML можуть заплутати питання. Якщо ви не встановите background-color власність html елемент, фон body буде "успадковано" html, так що все вікно має цей фон, і здається, ніби тіло займає все вікно, що не так!

0 для відповіді № 2

Коли він статичний, у нього є батько, який є html і коли ви використовуєте статичне позиціонування, у цьому випадку воно думає всередині батьків. html за замовчуванням, як і будь-який інший блок height: auto отже, якщо ви зміните це на 100%, воно стане таким, як ви очікували.

body має батьків html і будувати його розміри відповідно до батьківського.