Блок
на полную высоту экранаЧасто возникает потребность простягивать блок div на весь экран по вертикали. Простое указание height: 100%; не даст желаемого эффекта.
Для реализации данного функционала следует прописать следующее: в таблице стилей (например, style.css) определить 100% высоту для html и body, а затем для блока (например,
), который должен занимать весь экран, использовать min-height: 100%.html { height: 100%; }body { height: 100%; }.cont { min-height: 100%; }Для визуального представления окрасим блок cont в синий цвет, а для body (у которого по умолчанию отступ 8 пикселей) установим отступ в 0 пикселей.html { height: 100%; }body { height: 100%; margin: 0; }.cont { min-height: 100%; background-color: #00F; }Скачать пример файловДалее добавим блок footer, который всегда будет находиться ниже экрана, и для его пролистывания вниз. Обычно функционалом подвала (footer) добавляют контактную информацию, адрес, пункты меню и другие детали. Принцип прост: у нас уже есть блок, занимающий как минимум 100% высоты экрана, и под ним создаем блок, который для наглядности окрашен в черный цвет.
Поскольку блок пустой, мы временно установим ему высоту 50 пикселей.В HTML-файле:
Подробнее ...