0

Всем привет. Есть следующий небольшой макет:

<div class="main-col">

                <div class="Header container">
                    <div class="row justify-content-sm-center justify-content-md-between rowNav">
                        <div class="col btn-col d-flex px-0">
                            <a class="btnNav">
                                <h2 class="h2-calc">Money Calculation</h2>
                            </a>
                        </div>
                        <div class="col btn-col d-flex px-0">
                            <a class="btnNav">
                                <h2 class="h2-notebook">Notebook</h2>
                            </a>
                        </div>
                    </div>
                </div>


                <div class="MainContent container">
                    <div class="form d-flex justify-content-md-between pt-2">
                        <form>
                            <div class="row justify-content-md-between justify-content-sm-center">
                                <div class="col">
                                    <input class="form-control" type="text" placeholder="Date">
                                </div>
                                <div class="col">
                                    <input class="form-control" type="text" placeholder="Money">
                                </div>
                            </div>
                        </form>
                        <button type="button" class="btn btn-primary btn-add">Главный</button>  
                    </div>
                </div>

</div>

Подскажите пожалуйста, как сделать так, чтобы .Header был всегда прижат к верху экрана, а .MainContent всегда был посередине экрана. У меня почему то не получается сделать это, задав классу .main-col display: flex, а флекс элементам(.Header и .MainContent) задав align-self: flex-start и center, соответственно. Стили .main-col:

.main-col {
    max-width: 900px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

1 ответ 1

1

Добавьте жадности контенту )) Дальше по описанной вами схеме с оберткой

.MainContent {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

6
  • Так не получается, .MainContent теперь занимает всю высоту экрана, хотя у него должна быть фиксированная высота 463px.
    – EgorG
    10 мар 2020 в 12:59
  • Обновил. Вам останется доработать форму так как вам хочется 10 мар 2020 в 13:05
  • Я думаю я плохо объяснил. Ваши стили сделают .MainContent во всю высоту экрана, и выравняют контент внутри самого .MainContent по середине экрана. Но это не то, что мне нужно. У меня есть блок .MainContent c фиксированной высотой и именно он должен быть посередине блока .main-col. В итоге мне нужно, чтобы панель навигации, состоящая из двух кнопок(.Header), прижалась к верхнему краю экрана, а по середине экрана был прямоугольник высотой 463px.
    – EgorG
    10 мар 2020 в 13:16
  • 1
    Я понял просто не понятно чем вас текущий вариант не устраивает. Верстка достаточно гибкая штука )) Можно стили квадрата перенести внутрь MainContent, например к форме и у вас будет именно то что нужно визуально. Второй вариант. Можно убрать написанные мной стили в принципе и задать абсолютное позиционирование для Header, тогда на него не будут влиять флексовые стили. 10 мар 2020 в 13:21
  • Спасибо большое!
    – EgorG
    10 мар 2020 в 13:24

Ваш ответ

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

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