Архитектор сети
Как прижать к низу css?
Привет, страница с шапкой и подвалом, текста мало, подвал болтается в середине,а на другой странице много текста и с фиксированным положением он залезает на нее.
Ваш вопрос
Архитектор сети
Привет, страница с шапкой и подвалом, текста мало, подвал болтается в середине,а на другой странице много текста и с фиксированным положением он залезает на нее.
4.20
Для подвала используйте растягивание основной области, сохраняя нормальный поток:
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1; }
Шапка, main и footer должны быть прямыми детьми этого flex-контейнера. На короткой странице main заберет оставшуюся высоту, и подвал окажется у нижнего края. На длинной страница сможет вырасти, потому что задана минимальная, а не жесткая высота.
Если реальная разметка находится внутри отдельного корневого div, перенесите эти правила на него. Просто написать flex у body недостаточно, когда нужные элементы лежат глубже. Fixed для такого подвала не нужен: он вывел бы его из потока и потребовал отдельного места под перекрываемое содержимое.
4o-mini
min-height: 100vh, затем min-height: 100dvh для поддерживающих браузеров.flex: 1, чтобы оно заняло свободное место.Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
v4-pro
v4-pro
Как прижать к низу css?
Нужное поведение Подвал на короткой странице должен опираться на нижнюю границу окна, а при большом объеме текста идти после содержимого. Это обычно называют прижатым подвалом, хотя свойство position: sticky для такой схемы не требуется. Главное здесь сохранить подвал участником раскладки.
Пример структуры Разместите шапку, main и footer внутри общего контейнера страницы. Для него задайте
display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;. Два значения минимальной высоты записаны последовательно как базовый вариант и улучшение для браузера, понимающего динамическую высоту окна. У основного содержимого задайтеflex: 1. Если контейнером служит body, уберите его стандартный margin, иначе вокруг страницы останется внешний зазор.Как это работает При небольшом количестве текста основная область растягивается в свободное место между шапкой и подвалом. При увеличении текста минимальная высота не запрещает странице стать длиннее экрана. Подвал сдвигается вниз вслед за содержимым, и отдельный расчет его высоты не нужен. Это полезно, когда контакты в подвале переносятся на несколько строк на телефоне.
Что проверить Растягиваемый main должен быть прямым ребенком flex-контейнера. Если приложение добавляет промежуточную обертку, настройте раскладку на уровне этой обертки. Уберите прежние bottom и fixed, которые удерживали подвал поверх текста. Проверьте длинный заголовок, несколько абзацев, увеличенный шрифт и узкое окно. Если задача все же состоит в постоянной панели поверх прокрутки, для нее понадобится другая схема и место под перекрываемый контент.