По попе: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;
}