Как правильно задать 100% высоту body и html при верстке, чтобы потом не было проблем?

Question

[_ umr]

Пишу такие стили

html, body
	position relative
	width 100%
	height auto
	min-height 100%

body
	background green

#intro
	position relative
	width 100%
	height 100%
	background #fff

в итоге body не 100%в высоту и соответсветнно intro тоже не растягивается

Comments

[Lynn «Кофеман»]

А зачем? Кажется в современных реалиях нужно просто использовать 100vh и не заморачиваться.

Answer 1

[Дима Паутов]

По попе:

position relative
  width 100%
  height auto
  min-height 100%

Что делает этот код? Для чего все эти свойства?
Для чего вы и так блочным элементам даёте 100% ширину? Так как в данном коде width: 100% ну вообще не нужно!

По делу:
Учите наследование! % всегда берутся от родительского элемента. И если размер у родителя не указан, то и проценты не сработают!

У body родитель html, а у html окно браузера. Что бы растянуть body на 100%, нужно сначала html дать 100%, а потом body, а потом вашему #intro. Вот тогда #intro растянется на 100%.

html,
body,
#intro {
height: 100%;
}

Проще способ выглядит так:

#intro {
height: 100vh;
}

Answer 2

[Денис Инешин]

1. Пишите нормальный CSS
2. Используйте https://necolas.github.io/normalize.css/
3. Html трогать не нужно, достаточно одного правила body {height: 100%}

Answer 3

[Алексей]

Главное при верстве использовать правильные отступы что бы элементы друг на друга не ползли. А высота она сама подстроиться под контент.