Прикрепление фиксированного футера, остающегося внизу страницы независимо от её длины, достигается добавлением блока div и стилей CSS.
Подготовка: Отступ для изображения
Добавим отступ справа к изображению (10 пикселей):
/* Отступ справа для изображения */
margin-right: 10px;
Создание блока для фиксации футера
Создадим блок div с id="page-wrap". Разместим его после тега <body> и перед <footer>:
<div id="page-wrap"></div>
Этот блок будет контейнером для всего содержимого страницы.
Стили CSS
Добавим следующие стили CSS:
- Для тега <html>: высота 100%:
html { height: 100%; }
- Для блока #page-wrap:
#page-wrap { display: block; min-height: 100%; /* Или другое значение */ margin-bottom: -10px; /* Компенсация высоты футера */ }
- display: block; — отображение как блочный элемент.
- min-height: 100%; — минимальная высота, занимающая всё доступное пространство браузера (возможно, потребуется корректировка).
- margin-bottom: -10px; — отрицательный отступ снизу, компенсирующий высоту футера.
- Для футера (<footer>) и блока #page-wrap:
footer, #page-wrap { height: 100%; /* Или другое значение */ }
Значение height: 100%; может потребовать корректировки (например, до 94%), чтобы избежать перекрытия футера содержимым страницы.
Правильная настройка значений высот обеспечит фиксацию футера внизу страницы, независимо от размера окна браузера, обеспечивая адаптивную верстку.