Нормально ли задавать высоты тегам <html> и <body>?

55
14 января 2018, 03:27

Я ученик. Cтолкнулся с неадекватным поведением в адаптивного элемента (в Хроме в режиме имитации смартфона). Вкратце, проблема видна, когда у его предка стоит правило height: 100vh;, если же вместо этого поставить ему и <html> и <body> высоты 100% - всё становится хорошо. В файрфоксе проблемы вовсе не вижу.

Это вообще нормально - ставить какую-либо высоту для <html> и <body>?

Answer 1

Да, и для html и для body тоже можно задавать разные css-правила, и высоту в том числе.

На будущее, когда возникнут очередные вопросы "А делают ли так в принципе?", подсмотрите ответы на них у профессионалов, например хотя бы здесь:

Answer 2

Это нормально и часто оправдано. Если обратиться к спецификации, то там сказано, что свойство height может быть задано всем элементам за исключением non-replaced инлайновых элементов, ячеек таблиц и column groups. <html> и <body> это block-level элементы, так что height можно спокойно им задавать.

Visual formatting model details

'height' Applies to: all elements but non-replaced inline elements, table columns, and column groups

Answer 3

Aleksandr Shemetillo, посмотри мой пример и подумай, почему на данный момент фон не красный? Потом раскомментируй /*height: 100%;*/ и фон станет красным... Но если #wrapper задать height: не в процентах, то он будет виден... Это я к тому, что изначально у body нет высоты. Хочешь никогда не ошибаться, сделай себе привычку главный файл css начинай с этих строк ниже...

*{
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}

*, 
* ::after, 
*::before { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%; 
  /*height: 100%;*/ 
  background: #272727; 
  color: white; 
} 
 
#wrapper { 
  width: 100%; 
  height: 100%; 
  background: #f00; 
}
<div id="wrapper"></div>

READ ALSO
Не работает overflow-y:scroll

Не работает overflow-y:scroll

Имеется выпадающее меню, при ховере на вложенный пункт меню, если этих пунктов много и они выходят вниз за экран, должна появиться вертикальная...

89
Как удалить неиспользуемые стили из CSS?

Как удалить неиспользуемые стили из CSS?

Имеется HTML и CSS файл, в котором много неиспользуемых стилей CSS которые хотелось бы удалить в автоматическом режиме и оставить только те стили,...

113
контейнер в founation с 8 колонками

контейнер в founation с 8 колонками

что-то подобное как в колонках offset, только сделать в контейнер слева и справа по 2 колонкиЧтобы таким образом у нас получился 8-колоночный...

47
Как правильно сделать проверку формы?

Как правильно сделать проверку формы?

Как правильно отследить валидацию формы?

69