Ньюансы HTML

Блок <div> на всю высоту экрана

Иногда требуется растянуть блок 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;  // фиксируем фон
}

 

(Visited 21 times, 1 visits today)

Вам понравиться