Фиксированный футер: CSS-гайд для начинающих

Прикрепление фиксированного футера, остающегося внизу страницы независимо от её длины, достигается добавлением блока div и стилей CSS.

Подготовка: Отступ для изображения

Добавим отступ справа к изображению (10 пикселей):

/* Отступ справа для изображения */
margin-right: 10px;

Создание блока для фиксации футера

Создадим блок div с id="page-wrap". Разместим его после тега <body> и перед <footer>:

<div id="page-wrap"></div>

Этот блок будет контейнером для всего содержимого страницы.

Стили CSS

Добавим следующие стили CSS:

  1. Для тега <html>: высота 100%:

    html {
        height: 100%;
    }
  2. Для блока #page-wrap:

    #page-wrap {
        display: block;
        min-height: 100%; /* Или другое значение */
        margin-bottom: -10px; /* Компенсация высоты футера */
    }
    • display: block; — отображение как блочный элемент.
    • min-height: 100%; — минимальная высота, занимающая всё доступное пространство браузера (возможно, потребуется корректировка).
    • margin-bottom: -10px; — отрицательный отступ снизу, компенсирующий высоту футера.
  3. Для футера (<footer>) и блока #page-wrap:

    footer, #page-wrap {
        height: 100%; /* Или другое значение */
    }

    Значение height: 100%; может потребовать корректировки (например, до 94%), чтобы избежать перекрытия футера содержимым страницы.

Правильная настройка значений высот обеспечит фиксацию футера внизу страницы, независимо от размера окна браузера, обеспечивая адаптивную верстку.

Что будем искать? Например,программа