@ne_pes

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

есть блок, у которого стоит min-height:100%, внутри этого блока лежит еще один блок, в котором один заголовок, этому блоку я поставил height:100%, но он не принимает 100% как возможную высоту и высота блока зависит от контента, а не 100% доступной, почему так?
  • Вопрос задан
  • 113 просмотров
Пригласить эксперта
Ответы на вопрос 2
you_web
@you_web
Кратко обо мне
Тут надо разобраться что такое 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) корректно отображались на мобильных устройствах необходимо указать вьюпорт (тоже обязательно погуглите)
Ответ написан
Комментировать
inkShio
@inkShio
Попробуй так
html, body { height: 100%; min-height: 100%;}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы