аватар |

Статьи / 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% высоты для него.

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



Распечатать
Похожие статьи
28 ноября 2014 12:57 Плавное увеличение изображения при наведении CSS
08 июня 2017 12:54 Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?
05 сентября 2013 16:22 Как заменить изображение при наведении на него курсора? CSS
31 января 2013 19:43 Как сделать элемент прозрачным и убрать прозрачность CSS?
08 апреля 2013 14:20 Анимированная выдвижная боковая блок-панель на CSS


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