Помощ при програмиране, отговори на въпроси / 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> елемент се държи точно като всеки друг блоков елемент по отношение на неговите правила за оформление, esp. по отношение на височината му?

Отговори:

2 за отговор № 1

ДР: Да, това е нормалното поведение.

Въпреки това.

Някога имаше по-стар стандарт, в който тялото имаше височина на прозореца по подразбиране. Отдавна.

Също така някои неясни функции на HTML могат да объркат проблемите. Ако не зададете background-color собственост на html елемент, на фона на body ще бъде "наследена" от html, така че целият прозорец има този фон, което го прави да изглежда така, сякаш тялото заема целия прозорец, което не е така!

0 за отговор № 2

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

body има родител html и изграждане на неговите размери според родителя си.