Как растянуть блок header__content на всю высоту?

Рейтинг: 0Ответов: 1Опубликовано: 23.06.2023

Имеется такая разметка, header у нас 100vh. Хочу расставить блоки таким образом: логотип хочу поставить по центру по горизонтали, блок с текстом и кнопкой хочу прижать вниз, кнопка по центру по горизонтали. Проблема в том, что не знаю как правильно растянуть блок header__content. Как вы бы сверстали такое? Правильно ли я назвал классы?))

<header class="header">
    <div class="container">
        <a href="" class="logo">logo</a>
        <div class="header__content content-header">
            <div class="content-header__text">
                <h1>Заголовок</h1>
            </div>
            <a href="" class="btn">Кнопка</a>
        </div>
    </div>
</header>
css html веб-программирование
Источник: Stack Overflow на русском

Ответы

▲ 0
<body>
<style>
    body,
    html {
        margin: 0;
        padding: 0;
    }
    .header {
        height: 100vh;
    }
    .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }
</style>
<header class="header">
    <div class="container">
        <a href="" class="logo">logo</a>
        <div class="header__content content-header">
            <div class="content-header__text">
                <h1>Заголовок</h1>
            </div>
            <a href="" class="btn">Кнопка</a>
        </div>
    </div>
</header>