аватар |

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

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



Распечатать
Похожие статьи
04 сентября 2015 16:46 Как расположить несколько блоков div в ряд?
03 октября 2014 10:40 Как вызвать кроссбраузерную анимацию загрузки на CSS 3?
31 мая 2017 18:46 Как создать индикатор (полосу) прокрутки страницы на CSS3?
05 сентября 2013 16:22 Как заменить изображение при наведении на него курсора? CSS
16 октября 2014 12:40 Как закрепить футер или подвал внизу web-страницы CSS?


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