У родителя фиксированная высота - 600px
имеется тег h2 и под ним сразу идет flex-box
мне нужно, что бы изображение было прижато к самому низу родительского контейнера. То есть по факту мне нужно сделать так, что бы контейнер с flex-box не висел по середине и упал вниз(прижался к синему футеру)
.contacts {
background: url(/img/background-contacts.png) no-repeat center bottom;
height: 600px;
}
/*Блок-контейнер для флекса */
.contacts-container {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 1170px;
}
/*Заголовок*/
.contacts>h2 {
font-family: 'Montserrat';
font-weight: 700;
font-size: 56px;
text-align: center;
padding: 50px 0;
}
/* Изображение*/
.contacts-container>img {
align-self: flex-end;
}
height 100%
как я понял,тут не сработает, потому что-то мешает заголовок h2
, тогда я придумал этот костыль : height: calc(100% - 168px);
где 168px
это высота строки h2
+ padding сверху и снизу.
Но эта задача не дает покоя , возможно я жестко туплю. Можно ли как-то по другому вытянуть flex-box на оставшуюся высотку родителя ? или просто прижать его к низу ?
Ниже html
<section class="contacts">
<h2>Контактная информация</h2>
<div class="contacts-container">
<img src="/img/img-contacts.png" alt="">
<form class="contacts-form" action="#" method="post" enctype="multipart/form-data">
<p>Остались вопросы ?</p>
<p>*перезвоним в течении 15 мин</p>
<input type="text" name="name" placeholder="Ваше имя" />
<input type="tel" name="phone" placeholder="Ваш телефон" />
<input type="submit" value="Оставить заявку">
</form>
<ul class="contacts-list">
<li class="contacts-item">
<img src="/img/contacts_svg_1.png" alt="Наименование Индивидуального предпринимателя">
<p>скрыто</p>
</li>
<li class="contacts-item">
<img src="/img/contacts_svg_2.png" alt="Номер ИНН">
<p>ИНН : скрыто</p>
</li>
<li class="contacts-item">
<img src="/img/contacts_svg_3.png" alt="Номер телефона">
<p>скрыто <br>
скрыто</p>
</li>
<li class="contacts-item">
<img src="/img/contacts_svg_4.png" alt="Электронная почта">
<p>скрыто</p>
</li>
</ul>
</div>
</section>