div с высотой тела

Question

В настоящее время я столкнулся с этой проблемой, которая требовала, чтобы у меня был div с высотой тела. поэтому я погуглил, и было решение, для которого требовалось тело со 100% высотой и дочерний div со 100% высотой. он работал, но в адаптивном макете div не имел высоты тела из-за overflow-y. но когда я удалил 100% значение высоты div (# root) и установил его на initial, это сработало. почему?

введите описание изображения здесь

это свиток

html, body{
   overflow-x: hidden;
   height: 100%;
}

#root{
   height: 100%;
}

@media only screen and (max-width: 1024px){
   #root{
     height: initial;
   }
}

Answer 1

Это работает.

Хитрость заключается в том, чтобы использовать проценты при изменении размера внутреннего контейнера (div) (позволяя ему динамически изменять размер при изменении размера внешнего контейнера (в данном случае тела)) , при использовании единиц просмотра (vh, vw) во внешнем контейнере (body), соответствие его размера изменяющемуся размеру экрана.

margin:0 необходимо для сброса настроек браузера по умолчанию. Иногда я также добавляю padding:0 - но см. Это modern css руководство по сбросу для получения дополнительной информации.

Включите border: css, чтобы добавить красную границу к html / теги body, чтобы подтвердить их размеры, но обратите внимание, что затем тело будет превышать размер экрана на 2 пикселя (верхняя граница 1 пиксель и нижняя граница 1 пиксель), что сделает полосу прокрутки видимой. Так что просто включите / отключите его для тестирования.

Как правило, мне также нравится добавлять этот фрагмент в начале каждого проекта:

*{box-sizing:border-box;position:relative;}

html,body{
  height: 100vh;
  width: 100vw;
  margin: 0;
  xborder:1px solid red; /* Enable for testing - will overflow body by 2px... */
}
div{
  height:100%;
  width:100%;
  background:yellow;
}

/* Added only to center the contents of the DIV */
div{display:flex;justify-content:center;align-items:center;}

<div>DIV</div>