Почему не принимает height:100%?
Тут надо разобраться что такое 100%  и вообще что такое %.
Проценты это относительная величина.
То есть, если у вас есть блок-родитель с фиксированной высотой, допустим 300px, то дочерний блок с свойством height 100% будет иметь величину 300px соответственно.
Но если у  блокa с высотой 100% не будет ни 1ого родителя с фиксированной высотой, то по умолчанию, все эти блоки наследуют от html и body  высоту auto, то есть не имеют никакую высоту, если нет контента.
Пример одного и того же блок с родителем с фиксированной высотой и без - https://codepen.io/you_web/pen/Zomvxa
Что бы сделать высоту 100% от размера экрана, достаточно задать 100vh (можете погуглить поточнее,  но в общем это новые свойства, где 1vh - 1% высоты от экрана, 1vw - 1% ширина от экрана)
Так же, что бы эти свойства (vh и vw) корректно отображались на мобильных устройствах необходимо указать вьюпорт (тоже обязательно погуглите)
Попробуй так
html, body {    height: 100%;    min-height: 100%;}