Почему не работает высота блока в процентах от родителя?
HTML
<div class="header__content"> <div class="header__content--box"> <div class="header__text-box"> <h1 class="header__title">Ремонт стиральных машин на дому c годовой гарантией</h1> <p class="header__text"><span>Отремонтируем на дому</span> или бесплатно завезем и доставим обратно из сервисного центра</p> </div> <a href="#call" class="header__btn">Заказать звонок</a> </div> |
<div class="header__content"> <div class="header__content--box"> <div class="header__text-box"> <h1 class="header__title">Ремонт стиральных машин на дому c годовой гарантией</h1> <p class="header__text"><span>Отремонтируем на дому</span> или бесплатно завезем и доставим обратно из сервисного центра</p> </div> <a href="#call" class="header__btn">Заказать звонок</a> </div>
CSS
.header__content { min-height: calc(100vh - 104px); display: flex; align-items: center; justify-content: end; position: relative; } .header__content--box { color: #fff; width: 665px; } .header__title { margin-bottom: 25px; font-weight: 800; font-size: 67px; line-height: 64px; letter-spacing: -0.015em; } .header__text { margin-bottom: 35px; font-weight: 700; font-size: 20px; line-height: 24px; } .header__text span { color: #FFC464; } .header__btn { padding: 18px 50px; background-color: #000; color: #fff; font-weight: 500; font-size: 16px; line-height: 19px; border: 1px solid #000; border-radius: 15px; cursor: pointer; transition: all .2s ease; } .header__btn:hover { background-color: #fff; color: black; border: 1px solid #fff; } |
.header__content { min-height: calc(100vh - 104px); display: flex; align-items: center; justify-content: end; position: relative; } .header__content--box { color: #fff; width: 665px; } .header__title { margin-bottom: 25px; font-weight: 800; font-size: 67px; line-height: 64px; letter-spacing: -0.015em; } .header__text { margin-bottom: 35px; font-weight: 700; font-size: 20px; line-height: 24px; } .header__text span { color: #FFC464; } .header__btn { padding: 18px 50px; background-color: #000; color: #fff; font-weight: 500; font-size: 16px; line-height: 19px; border: 1px solid #000; border-radius: 15px; cursor: pointer; transition: all .2s ease; } .header__btn:hover { background-color: #fff; color: black; border: 1px solid #fff; }
Дополнительно:
Ответы:
1. не вижу в коде никаких процентов
2. вижу по скринам. ну а что вы хотите? у родителя высота не задана. Минимальная высота не подходит.
Уберите align-items:center
Зачем центрировать, если все равно хотите растянуть на всю высоту.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с установкой высоты блока в процентах от родителя может возникать по нескольким причинам. Во-первых, убедитесь, что у родительского элемента установлена высота. Если у родителя не задана высота, то блок не сможет унаследовать ее.
Если у вас есть родительский элемент с заданной высотой, но дочерний блок все равно не растягивается по этой высоте, то возможно, проблема в использовании единиц измерения. Проверьте, что установленное значение высоты в процентах не приводит к округлению значения. Например, если у родителя высота 100px, то установка высоты дочернего блока в 50% может привести к округлению до 50px.
Также стоит учитывать, что высота в процентах зависит от высоты родительского элемента, который должен иметь явно указанную высоту. Если родительский элемент имеет высоту auto, то дочерний блок не сможет правильно унаследовать высоту.
Для решения проблемы с высотой блока в процентах от родителя, рекомендуется установить явно указанную высоту для родительского элемента и использовать правильные единицы измерения. Ниже приведен пример кода на языке PHP, демонстрирующий правильное задание высоты блока в процентах от родителя:
<div style="height: 200px"> <div style="height: 50%;background-color: #f0f0f0"> Этот блок будет занимать 50% высоты родителя. </div> </div>
При использовании подобного подхода и установке правильных значений высоты, вы сможете корректно установить высоту блока в процентах от родителя.