Как увеличить размер элемента body до размера html?

Question

Я хочу, чтобы тело расширялось по мере увеличения страницы. Я попытался сделать высоту тела 100% и высоту элемента html 100%, и это не сработало, как ожидалось:

Синий представляет тело, а красный - html element

Я хочу, чтобы тело покрывало весь html элемент. Это то, что у меня есть в виде кода в css:

html {
font-family: Palatino, 'Palatino Linotype', serif;
background-color: red;
height: 100%;
margin: 0;
padding: 0; 
}
body {
background-color: blue;
height: 100%;
margin: 0;
padding: 0;
}

Надеюсь, кто-нибудь может мне помочь!

Answer 1

Вместо изменения высоты на 100% попробуйте изменить ее на height: auto; Это автоматически регулирует высоту в соответствии с содержимым внутри него.

Если для высоты задано числовое значение c (например, пиксели, (r) em, проценты), тогда, если содержимое не умещается в пределах указанной высоты , он переполнится.

Надеюсь, это поможет

Answer 2

Если вы хотите, чтобы элемент был размером с окно браузера, вы можете использовать vh вместо%, который устанавливает для элемента высоту окна просмотра (есть также vw, который устанавливает его в ширину окна просмотра).

body {
  height: 100vh;
}

Не устанавливайте атрибут высоты для элемента html, просто установите его в теле (которое должно содержать все ваши видимые элементы).