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

299

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; 
}