как иметь разделы, размер которых изменяется в зависимости от содержимого, и другой, который использует оставшееся пространство

Question

Я пытаюсь создать экран веб-приложения, на котором верхний колонтитул прилипает к верху, а нижний колонтитул прилипает к низу все время, а основное содержимое отображается между ними с полосой прокрутки, если это необходимо. * Я хочу сделать это возможным на нескольких устройствах, чтобы верхний и нижний колонтитулы могли меняться по высоте, чтобы соответствовать их содержимому на небольших экранах, а для основного содержимого должно использоваться оставшееся пространство.

введите описание изображения здесь

Возможно ли создать такое поведение с помощью css? (может быть, используя flexbox?)

Answer 1

Вы правы - для этого идеально подходит flexbox:

html,
body {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    background-color: #0800ff;
}

.content {
    background-color: #fff;
    flex-grow: 1;
    overflow-y: auto;
}

footer {
    background-color: #fec11a;
}

<section class="container">
    <header>...</header>
    <div class="content">
        <ol>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
        </ol>
    </div>
    <footer>...</footer>
</section>

Обратите внимание, как я использую height: 100vh для .container и flex-grow: 1 для .content. Вот и все.