Как зафиксировать, чтобы header был вверху, а footer внизу?

Question

[Alexsey]

Как зафиксировать header вверху, а footer внизу?
При этом div article прокручивался бы в зависимости от длины контента.

<div class="wrapper">
    <div class="main">
        <div class="header">
            <div>Код блока HEADER</div>
        </div>
        <div class="article">
            <p>Код блока article </p>
        </div>
    </div>
    <div class="footer">
        <div>Код блока FOOTER</div>
    </div>
</div>

Answer 1

[Александр Цымбал]

хэдеру position: fixed; top: 0; left: 0; width: 100%;
футеру position: fixed; bottom: 0; left: 0; width: 100%;

и у .article надо padding-top и padding-bottom задать для компенсации высоты хэдера и футера, чтобы содержание не "пряталось" за ними.

А вообще, надо понимать контекст задачи. Видеть макет. Потому что фиксированный футер - это редкость. Только если что-то типа мессенджера верстается, где в футере поле для ввода текста всегда должно быть видно.

Comments

[Alexsey]

Да так и есть..типа мессенджера.
Footer отправить сообщение. Header список чата и вернутся на другой экран.

[Александр Цымбал]

тогда еще как вариант - у рутового элемента (body, html, .wrapper - в зависимости от задачи) отключить вертикальный скролл совсем. добавить

overflow: hidden; height:100vh; //или 100% - в зависимости от вёрстки

а у блока .article наоборот добавить скролл

overflow-y: scroll;//или auto или overlay - что понравится
overflow-x: hidden;

Тогда скролл будет тянуться только по высоте .article, что визуально более правильно. Но сути не меняет.

[Ankhena]

Александр Цымбал, Alexsey, а ведь 2022 год на дворе и давно придумали флексы и даже гриды, чтобы не страдать фиксами и расчетами паддингов... Хоть плачь
https://codepen.io/AnnaSummer/pen/gOvbEdB
Вам только чуть-чуть скорректировать и прокрутку добавить.

[Александр Цымбал]

Ankhena, а вы смотрели последний мой codepen? куратор тега CSS

[Александр Цымбал]

Ankhena, и вообще, чем плох position: fixed? если задача зафиксировать элемент поверх прокручиваемого? просто нельзя? что за предубеждения?

[Ankhena]

Александр Цымбал, полно статей про позиционирование, почитайте что делают fixed, absolute, про поток документа, слои, как браузер всё это рисует и перерисовывает при изменениях.
Ничего плохого в них нет, если использовать по назначению и когда нет других вариантов.
В вашем решении, нужно к этому ещё и js прикрутить, чтобы узнать высоту и передать её в отступы.

[Ankhena]

Александр Цымбал, ещё есть sticky, который хотя бы решает проблему с неизвестной высотой.

Answer 2

[pjery3]

https://sgeek.pro/web/coding/5-sposobov-kak-prizha...

Любой способ на вкус, я предпочитаю на flexbox.
И не всегда фиксированный футер это редкость, к примеру на многостраничном сайте может быть страница с маленьким контентом.