Иногда требуется растянуть блок div на весь экран по вертикали. Если просто указать height: 100%; , то это не поможет.
Делаем так: в каскадной таблице стилей (например style.css) указываем 100% высоту для самого html и body, а затем для блока (например <div class=»cont»> </div>, который должен занимать весь экран, указываем 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-файл:
<body>
<div class=»cont»>
</div>
<div class=»footer»>
</div>
</body>
В css-файл:
.footer { height:50px; background-color:#000; }
Скачать файлы с примером
Закрепляем фоновое изображение во весь экран
Допустим, мы решили сделать на сайте фоновым изображением картинку, но так, чтобы при прокрутке фон оставался статичным и только одной картинкой, т.е. чтобы он не повторялся и растягивался пропорционально на всех устройствах. И ещё, чтобы картинка была всегда по центру.
В css-файл:
body {
height: 100%;
margin:0;
background-image:url(bg.jpg); // ссылка на файл картинки
background-position:center; // центруем изображение
background-size:cover; // растягиваем фон на весь экран
background-attachment:fixed; // фиксируем фон
}
Источник: