0

У родителя фиксированная высота - 600px

имеется тег h2 и под ним сразу идет flex-box

Пример 1

мне нужно, что бы изображение было прижато к самому низу родительского контейнера. То есть по факту мне нужно сделать так, что бы контейнер с 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>

1 ответ 1

0
  1. Задаем для contacts - display: flex;

    .contacts {display: flex; flex-direction: column;}

  2. Прижимаем к низу .contacts-container - margin-top: auto;

    .contacts-container {margin-top: auto;}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.