Как правильно задать 100% высоту body и html при верстке, чтобы потом не было проблем?
По попе: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;
}
1. Пишите нормальный CSS
2. Используйте https://necolas.github.io/normalize.css/
3. Html трогать не нужно, достаточно одного правила body {height: 100%}