Почему не принимает height:100%?

Question

[ne_pes]

есть блок, у которого стоит min-height:100%, внутри этого блока лежит еще один блок, в котором один заголовок, этому блоку я поставил height:100%, но он не принимает 100% как возможную высоту и высота блока зависит от контента, а не 100% доступной, почему так?

Answer 1

[Хороший UI]

Тут надо разобраться что такое 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) корректно отображались на мобильных устройствах необходимо указать вьюпорт (тоже обязательно погуглите)

Answer 2

[inkShio]

Попробуй так
html, body { height: 100%; min-height: 100%;}