1

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

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

1
  • 2
    Действительно, любопытно. А что по высотам <html> и <body>? 12 янв 2018 в 0:34

3 ответа 3

4

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

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

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

2
  • стоило обратить внимание, что тут, в отличие от вопроса height:100% стоит только у html
    – Grundy
    12 янв 2018 в 7:46
  • Спасибо. Да, я посмотрел и здесь и ещё на нескольких сайтах. Где-то установлена, где-то - нет. Я где-то услышал, что на тэги вешать правила - вообще большой грех. Вот и искал мнений живых людей. 12 янв 2018 в 11:40
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>

2
  • Спасибо за ответы. Но вы отвечаете не совсем на мой вопрос, а, скорее, на свою интерпретацию его. Пример мне понятен, но в моём случае было скорее так, приблизительно: html, body { /* height: 100%; */ } #wrapper { height: 100vh; }. Как видите, "рост" у элемента всё же есть. Правила из вашего ответа я тоже ставлю обычно, поскольку это удобно. Просто я не вполне уверен был, что это профессионально. 12 янв 2018 в 12:24
  • учи css и вполне будешь уверен...)
    – Air
    12 янв 2018 в 12:37
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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.