аватар |

Статьи / CSS /

Как правильно создать DIV с height в 100%? CSS

Как сделать div с height (высотой) 100%? CSS



Многие дизайнеры хоть раз да сталкивались с задачей создания блока div с высотой либо в 100%, либо меньше - главное, чтобы высота изменялась в зависимости от размеров окна или родительского div. Однако сразу скажу, мало указать у div высоту в 100%. Основная ошибка заключается в том, что многие не дают браузеру понять, что считать за 100%. От родительского элемента? От body? Относительного предыдущего элемента?

Нужно у всех родительских элементов, начиная с body, указывать height=100%. Смотрим пример:

Код HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV со 100% height</title>
<style type="text/css">
  html, body {
    height: 100%;
  }
  div {
    height:100%;
    background-color: #D1D1D1;
  }
  div div {
    background-color: #0085cc;
    color: #ffffff;
    width: 150px;
  }
</style>
</head>
<body>
  <div>
    <div>Содержимое div</div>
  </div>
</body>
</html>

Демонстрация Скачать исходники

В итоге мы имеем два div с высотой в 100%. Внимательно по иерархии везде проставляйте значение height, только в таком случае каждый дочерний элемент сможет определить для себя, что же есть 100% высоты для него.

Спасибо за внимание!
 



Распечатать
Похожие статьи
27 ноября 2013 19:53 Набор и примеры элементов Flat UI
15 мая 2017 18:13 Как сделать видео фоном блока на CSS?
17 июля 2015 12:15 Как создать красивую всплывающую подсказку на сайте с помощью CSS?
08 июня 2017 12:54 Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?
04 сентября 2015 16:46 Как расположить несколько блоков div в ряд?


Комментарии к статье (vk.com)