Css высота блока: min-height | htmlbook.ru

Содержание

height | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	3.1+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится
тег <img>). Высота не включает толщину границ вокруг
элемента, значение отступов и полей.

Если содержимое
блока превышает указанную высоту, то высота элемента
останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности
может получиться наложение содержимого элементов друг на друга, когда
элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.

Синтаксис

height: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS —
например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной
записи высота элемента вычисляется в зависимости от высоты родительского элемента.
Если родитель явно не указан, то в его качестве выступает окно браузера.
auto устанавливает высоту исходя из содержимого
элемента

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>height</title>
  <style>
   .layer {
    height: 50px; /* Высота блока */
    width: 150px; /* Ширина блока */
    overflow: scroll; /* Добавляем полосы прокрутки */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
  </style>
 </head> 
 <body> 
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства height

Объектная модель

[window.]document.getElementById(«elementID»).style.height

Браузеры

Браузер Internet Explorer 6 некорректно определяет height как min-height.

В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

min-height | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
7.0	8.0+	1.0+	4.0+	2.0+	1.0+	2.1+	2.0+

Краткая информация

Версии CSS

Описание

Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Высота элемента
Значения свойств					Высота
min-height	<	height	<	max-height	height
min-height	>	height	>	max-height	min-height
min-height	>	height	<	max-height	min-height
min-height	<	height			height
min-height	>	height			min-height
min-height	>			max-height	min-height
min-height	<			max-height	max-height

Данные из таблицы следует понимать следующим образом. Если значение высоты (height) меньше значения min-height, то высота элемента принимается равной min-height.

Синтаксис

min-height: значение | проценты | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>min-height</title>
  <style>
   #bottom {
    background: #66806E url(images/clover.png) no-repeat 20px bottom; /* Параметры фона */ 
    min-height: 80px; /* Минимальная высота */ 
    color: #E4BC96; /* Цвет текста */ 
    padding: 5px 5px 5px 140px; /* Поля вокруг текста */ 
   }
   #bottom p { margin: 5px 0; }
   #bottom a {
    color: #FFFDE0;
   }
  </style>
 </head>
 <body>

  <div>
    <p>Сайт Cloverfield</p>
    <p><a href="techinfo.html">Информация о сайте</a> <a href="activity.html">Об авторе</a></p>
  </div>

 </body>
</html>

В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселам. Результат примера показан на рис. 1.

Рис. 1. Высота блока, заданная с помощью min-height

Объектная модель

[window.]document.getElementById(«elementID»).style.minHeight

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

max-height | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
7.0	8.0+	1.0+	4.0+	2.0+	1.0+	2.1+	2.0+

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам, кроме встроенных и таблиц
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Версии CSS

Описание

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Высота элемента
Значения свойств					Высота
min-height	<	height	<	max-height	height
		height	<	max-height	height
		height	>	max-height	max-height
min-height	>	height	>	max-height	min-height
min-height	>	height	<	max-height	min-height

Данные из таблицы следует понимать следующим образом. Если значение высоты (height) больше значения max-height, то высота элемента принимается равной значению max-height.

Синтаксис

max-height: значение | проценты | none | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

none: Отменяет действие этого свойства.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>max-height</title>
  <style>
   .block {
    overflow: auto; /* Полоса прокрутки при необходимости */ 
    padding: 10px; /* Поля вокруг текста */ 
    max-height: 80px; /* Максимальная высота */ 
    background: #ffe; /* Цвет фона */ 
    border: 1px solid #cb2027; /* Параметры рамки */ 
   } 
   .block p {
    margin: 2px auto; /* Отступы в абзаце */ 
   }
  </style>
 </head>
 <body>
  <div>
    <p>Блокирование элемента не позволяет вообще производить с 
       ним каких-либо действий, в том числе выделять содержимое 
       текстового поля, изменять его или активизировать. 
       Заблокированное поле помечается обычно серым цветом</p>
    <p>Некоторые браузеры позволяют выделять и копировать 
       содержимое заблокированного текстового поля, но все 
       остальные действия недоступны.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования свойства max-height

Объектная модель

[window.]document.getElementById(«elementID»).style.maxHeight

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

line-height | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от
базовой линии шрифта. При обычных обстоятельствах расстояние между строками
зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное
значение межстрочного расстояния не допускается.

Синтаксис

line-height: множитель | значение | проценты | normal | inherit

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего
текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал.
В качестве значений принимаются также любые единицы длины, принятые в CSS —
пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную
запись, в этом случае за 100% берется высота шрифта.

normal: Расстояние между строк вычисляется автоматически.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>line-height</title>
  <style>
   h2 {
    line-height: 60%;
   } 
   p {
    line-height: 1.5;
   }
  </style>
 </head> 
 <body> 
  <h2>Duis te feugifacilisi</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства line-height

Объектная модель

[window.]document.getElementById(«elementID»).style.lineHeight

Браузеры

Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм. Также в этом браузере не поддерживается значение inherit.

Высота и ширина блока в CSS

Известно, что веб-дизайнер рисует макет сайта, а верстальщик делает верстку, то есть пишет HTML/CSS код. А что именно он пишет на HTML странице? Все элементы дизайн-макета помещаются в блоки.

Если заглянуть в исходный код, то мы увидим, что там очень много дивов и все они заполнены фрагментами дизайна. Цельный рисунок раскидали, как мозаику по своим ячейкам.

Для того, чтобы все фрагменты дизайна никуда не поехали, а были четко зафиксированы в своих блоках, так как нарисовал дизайнер. Необходимо хорошо знать, как ведут себя блоки по высоте и ширине.

Рассмотрим на примере блока div, сделаем HTML разметку.

<body> <div></div> </body>

Поведение блоков по высоте

Пустой блок не виден на странице, а чтобы он стал виден, ему надо задать высоту или вставить внутри него контент.

body { background: #d5d5d5; }

div { background: #d56287; height: 100px; }

Зададим ему высоту 100 пикселей и цвет фона, чтобы фон страницы и блок были разного цвета, иначе мы ничего не увидим.

Поведение блоков с контентом

Убираем высоту height и вставляем текст внутри блока.

<div> <p>текст</p> </div>

div { background: #d56287; }

Мы видим, что высота блока меняется, она зависит от количества контента. Почему так происходит? По умолчанию высота блока, равна значению auto, то есть автоматически подстраивается под высоту занимаемого контента в родительском блоке.

Приоритеты у блоков

Давайте вернем обратно высоту блока 100 пикселей и вставим параграф с текстом, пока текста мало, блок действительно на странице занимает по высоте 100 пикселей. Добавим больше текста и видим, что блок проигнорировал заданную высоту и занял ту высоту, которая потребовалось тексту. Заданная жестко высота, все равно уступила контенту.

Неужели никак нельзя принудить блок соблюдать заданную высоту и не растягиваться вслед за контентом? Можно, но только за счет автоматического обрезания текста, выходящего за рамки заданных размеров, называется это свойство overflow.

Сокрытие лишнего содержимого в блоке

Надо добавить в CSS код свойство overflow: hidden

div { background: #d56287; height: 100px; overflow: hidden; }

всё, что не поместиться в блоке, будет скрыто, мы видим, как некрасиво обрезался текст.

В случае необходимости вывода содержимого блока целиком, можно задействовать прокрутку, тогда следует прописать блоку вместо hidden.

overflow: scroll;

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

Поведение блоков по ширине

А как ведут себя блоки, если не задавать для них ширину? Мы не задавали ширину блоку, но все равно его ширина автоматически занимает все отведенное ему пространство. Ширина блока по умолчанию равна 100%. Но если мы ограничим ширину, задав например 200 пикселей, то визуально увидим, что блок занимает 200 пикселей.

div { background: #d56287; height: 100px; width: 200px; }

Однако, здесь есть подвох, если мы наведем на элемент в инспекторе кода, то увидим, что на самом деле блок продолжает занимать всю ширину браузера, но делает это скрытно. Таким образом, 200 пикселей он занимает открыто, а остальное пространство зарезервировано и не дает другим элементам встать с ним в одну строчку.

Продублируем наш блок и видим, что второй блок встал на новую строку и тоже занял всю строчку. Это особенность блочных элементов.

Так как же их заставить встать в один ряд? Надо сделать их строчно-блочными элементами и тогда они прекрасно будут стоять рядом в одной строке. Каждому блоку нужно задать свойство.

display: inline-block;

Высота и ширина блока могут задаваться в относительных единицах, например в %. Надо учитывать что размеры дочерних блоков задаются относительно родителя и тогда родителем для блока div будет body.

Мой видеокурс «Вёрстка сайта с нуля» поможет вам от теории перейти к практике и сверстать свой первый сайт.

Создано 26.09.2018 10:06:47

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Height and Width CSS ширина и высота уроки для начинающих академия

Этот элемент имеет ширину 100%.

Установка высоты и ширины

Свойства height и width используются для задания высоты и ширины элемента.

heightи width могут быть установлены в Auto (это по умолчанию. Означает, что обозреватель вычисляет высоту и ширину) или указывается в значениях длины, таких как px, cm и т. д., или в процентах (%), содержащихся в блоке.

Этот элемент имеет высоту 200 пикселей и ширину 50%

Пример

div {

height:
200px;
    width: 50%;
    background-color: powderblue;
}

Этот элемент имеет высоту 100 пикселей и ширину 500 пикселей.

Пример

div {

height:
100px;
    width: 500px;
    background-color: powderblue;
}

Примечание: Свойства height и width не включают заполнение, границы или поля; они устанавливают высоту/ширину области внутри заполнения, границы и поля элемента!

Установка Макс-ширина

Свойство max-width используется для задания максимальной ширины элемента.

max-widthможет быть задано в значениях длины, таких как px, cm и т.д., или в процентах (%), содержащихся в блоке, или значение None (по умолчанию. Означает, что максимальная ширина отсутствует).

Проблема с <div> выше возникает, когда окно обозревателя меньше, чем ширина элемента (500px). Затем обозреватель добавляет горизонтальную полосу прокрутки на страницу.

Использование max-width вместо этого, в этой ситуации, улучшит обработку браузера небольших окон.

Совет: Перетащите окно браузера в меньшую ширину, чем 500px, чтобы увидеть разницу между двумя div!

Этот элемент имеет высоту 100 пикселей и максимальную ширину 500 пикселей.

Примечание: Значение свойства max-width переопределяет width.

В следующем примере показан элемент <div> с высотой 100 пикселей и максимальным шириной 500 пикселей:

Пример

div {
    max-width: 500px;

height:
100px;
    background-color: powderblue;
}

Попробуйте примеры

Установка высоты и ширины элементов
В этом примере показано, как задать высоту и ширину различных элементов.

Установка высоты и ширины изображения с помощью процента
В этом примере показано, как задать высоту и ширину изображения, используя значение процента.

Установить минимальную ширину и максимальную ширину элемента
В этом примере демонстрируется, как задать минимальную ширину и максимальную ширину элемента, используя значение пиксела.

Установить min-высоту и максимальную высоту элемента
В этом примере показано, как задать минимальную высоту и максимальную высоту элемента, используя значение пиксела.

Все свойства измерения CSS

Свойство	Описание
height	Задает высоту элемента
max-height	Задает максимальную высоту элемента
max-width	Задает максимальную ширину элемента
min-height	Задает минимальную высоту элемента
min-width	Задает минимальную ширину элемента
width	Задает ширину элемента

Ширина (width) и высота (height) в HTML

В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота):

<div></div>

Получится такой результат:

Можно задавать ширину не только в пикселях, но и в процентах от ширины родительского элемента. Попробуем сделать это:

<div></div>

Получится такой результат:

К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать «height:50%;», то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой. Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after)

Максимальная и минимальная ширина (max-width и min-width)

Жёсткое ограничение ширины — это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%.

<div></div>

Результат будет аналогичен предыдущему примеру:

Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить «max-width:400px;» на «width:400px», то блок будет выходить за пределы родительского элемента:
По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.
Максимальная и минимальная высота (max-height и min-height)
Для блока div можно задать максимальную высоту. Это делается в том случае, если контента в блоке будет слишком много и есть вероятность, что он испортит вёрстку сайта. Ведь у контейнера div высота изменяется автоматически в зависимости от того, сколько занимает места его дочерние элементы. 
Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код:
<div  contenteditable="true">
   Тише, мыши, кот на крыше,
   а котята ещё выше.
   Кот пошёл за молоком,
   а котята кувырком.
   Кот пришёл без молока,
   а котята ха-ха-ха. 
</div>
Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки:
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха. 
Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.
По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.
 CSS свойство высоты 
 Пример 
 Установите высоту двух элементов
:
 div.a {
 высота: авто; 
 граница:
 Сплошной черный 1px; 
}
 div.b {
 height: 50 пикселей; 
 граница: сплошной черный 1px; 
}
Попробуй сам »
 Дополнительные примеры «Попробуйте сами» ниже.
 Определение и использование 
 Свойство  height  устанавливает высоту элемента.
 Высота элемента не включает отступы, границы или поля!
 Если  высота: авто;  элемент автоматически отрегулирует свою высоту, чтобы
 его содержимое должно отображаться правильно.
 Если высота   установлена в числовое значение (например, пиксели, (r) em, проценты), то если
 содержимое не умещается в пределах указанной высоты, оно будет переполняться. Как
 контейнер будет обрабатывать переполняющееся содержимое, определяемое
 свойство переполнения.
  Примечание:  Минимальная высота и
 свойства max-height переопределяют 
 высота  собственности.
 Поддержка браузера 
 Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
 Объект 
 высота  1,0  4,0  1,0  1,0  7,0
 Синтаксис CSS 
 высота: авто |  длина  | начальная | наследование;
 Стоимость объекта 
 Другие примеры 
 Пример 
 Установить высоту элемента на 50% от высоты родительского элемента:
 #parent {
 height: 100px; 
}
 #child {
 рост: 50%; 
}
Попробуй сам »
 Связанные страницы 
 Учебник
 CSS: высота и ширина CSS
 Учебник
 CSS: модель коробки CSS
 Ссылка CSS: свойство ширины
 Ссылка на HTML DOM: свойство высоты
 CSS Свойство дефисов 
 Пример 
 Установить разные расстановки переносов:
 div.a {
 -webkit-hyphens: нет; 
 -ms-дефисы: нет; 
 дефисы: нет; 
}
 div.b {
 -webkit-hyphens: руководство; 
 -ms-дефисы:
 руководство по эксплуатации; 
 дефиса: ручной; 
}
 div.c {
 -webkit-hyphens:
 авто; 
 -ms-дефисы: авто; 
 дефиса: авто; 
}
 Попробуй сам »
 Определение и использование 
 Свойство  дефис  определяет,
 расстановка переносов позволяет создавать более мягкие возможности переноса в строке
 текст.
 Значение по умолчанию:  инструкция
 Унаследовано:  да
 Анимируемое:  нет. Читать about  animatable 
 Версия:  CSS3
 Синтаксис JavaScript:   объект  .style.hyphens = «none»
 Поддержка браузера 
 Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
 Объект 
 дефис  55,0  79,0 
 10,0 -мс-  43,0  5.1 -webkit-  44,0
 Синтаксис CSS 
 дефисы: нет | ручной | авто | начальный | наследование;
 Стоимость объекта 
 Значение  Описание
 нет  Слова без дефиса
 инструкция  По умолчанию.Слова переносятся только через дефис &. или & застенчивый; (при необходимости)
 авто  Слова переносятся там, где алгоритм решает (при необходимости)
 начальный  Устанавливает для этого свойства значение по умолчанию. Читать о  начальных 
 унаследовать  Наследует это свойство от своего родительского элемента. Читать про  наследство 
 CSS Высота и ширина Размеры 
 Свойства CSS  height  и  width  используются для установки
 высота и ширина элемента.
 Свойство CSS  max-width  используется для установки максимальной ширины элемента.
 Этот элемент имеет высоту 50 пикселей и ширину 100%.
 Попробуйте сами »
 CSS Установка высоты и ширины 
 Свойства  высота,  и  ширина  используются для установки
 высота и ширина элемента.
 Свойства высоты и ширины не включают отступы, границы или поля.
 Он устанавливает высоту / ширину области внутри отступа, границы и поля
 элемент.
 Значения высоты и ширины CSS 
 Свойства  высота  и ширина  
 может иметь следующие значения:
  авто  — это значение по умолчанию. Браузер
 вычисляет высоту и ширину
  длина  — Определяет высоту / ширину в пикселях, см.
 пр.
 %  — Определяет высоту / ширину в процентах от
 содержащий блок
  начальный  — Устанавливает высоту / ширину на свое
 значение по умолчанию
  наследовать  — высота / ширина будут
 унаследовано от своего родительского значения
 Высота и ширина CSS Примеры 
 Этот элемент имеет высоту 200 пикселей и ширину 50%
 Пример 
 Установите высоту и ширину элемента
:
 div {
 высота:
 200 пикселей; 
 ширина: 50%; 
 цвет фона: синий порошковый; 
}
 Попробуй сам »
 Этот элемент имеет высоту 100 пикселей и ширину 500 пикселей.
 Пример 
 Установите высоту и ширину другого элемента
:
 div {
 высота:
 100px; 
 ширина: 500 пикселей; 
 цвет фона: синий порошковый; 
}
 Попробуй сам »
  Примечание:  Помните, что свойства  height  и  width  не включают отступы, границы,
 или наценки! Они устанавливают высоту / ширину области внутри отступа, границы,
 и запас элемента!
 Установка максимальной ширины 
 Свойство  max-width  используется для установки максимальной ширины элемента.
 Максимальная ширина   может быть указана в  значениях длины , таких как пиксели, см и т. Д., Или в процентах (%) от
 содержащий блок, или значение none (это
 По умолчанию. Означает, что максимальной ширины нет).
 Проблема с 
  выше возникает, когда окно браузера меньше ширины
 элемент (500 пикселей). Затем браузер добавляет на страницу горизонтальную полосу прокрутки.
 Использование  max-width  вместо этого в этой ситуации улучшит обработку браузером небольших окон.
  Совет:  Перетащите окно браузера до ширины менее 500 пикселей, чтобы увидеть разницу между
 два div!
 Этот элемент имеет высоту 100 пикселей и максимальную ширину 500 пикселей.
  Примечание:  Если вы по какой-то причине используете оба
  ширина  свойство и
  max-width  для того же элемента, а значение свойства
  ширина  свойство больше, чем
  max-width  свойство; в
  max-width  будет использоваться свойство (и
  width  свойство игнорируется).
 Пример 
 Этот элемент
 имеет высоту 100 пикселей и
 максимальная ширина 500 пикселей:
 div {
 максимальная ширина: 500 пикселей; 
 высота:
 100px; 
 цвет фона: синий порошковый; 
}
 Попробуй сам »
 Попробуйте сами — Примеры 
 Установить высоту и ширину элементов 
 Этот пример демонстрирует, как установить высоту и ширину различных элементов.
 Установите высоту и ширину изображения в процентах 
 В этом примере показано, как установить высоту и ширину изображения с помощью процентного значения.
 Установить минимальную и максимальную ширину элемента 
 В этом примере показано, как установить минимальную и максимальную ширину элемента с помощью значения в пикселях.
 Установить минимальную и максимальную высоту элемента 
 В этом примере показано, как установить минимальную и максимальную высоту элемента с помощью значения в пикселях.
 Проверьте себя упражнениями! 
 Все свойства размеров CSS 
 Объект  Описание
 высота  Устанавливает высоту элемента
 макс. Высота  Устанавливает максимальную высоту элемента
 максимальная ширина  Устанавливает максимальную ширину элемента
 мин. Высота  Устанавливает минимальную высоту элемента
 Мин. Ширина  Устанавливает минимальную ширину элемента
 ширина  Устанавливает ширину элемента
 высота | CSS-уловки 
 Свойство  height  в CSS определяет высоту содержимого боксов и принимает любые значения длины.
 Область «содержимого» определяется как заполнение и граница в дополнение к высоте / ширине или размеру, которые занимает само содержимое.
 Отрицательные значения, такие как  height: -100px , не принимаются. Свойство  height  не применяется к незамещенным встроенным элементам, включая столбцы таблицы и группы столбцов.
  .wrap {
  высота: авто; / * ключевое слово auto * /

  высота: 120 пикселей; / * значения длины * /
  высота: 10em;
  высота: 0; / * длина без единицы измерения подходит для нуля * /

  высота: 75%; / * процентное значение * /

  рост: наследовать; / * значение, унаследованное от родительского элемента * /
}  
  Оцените эту ручку! 
 Если высота содержащего блока не указана явно и элемент не позиционирован абсолютно, значение его высоты вычисляется как auto (оно будет таким же высоким, как и содержимое внутри него, или ноль, если содержимое отсутствует) .Если для части  содержимого элементов  требуется больше вертикального пространства, чем доступно из назначенного значения, поведение элементов определяется свойством  переполнения .
 При использовании ключевого слова  auto , высота   вычисляется на основе элементов  области содержимого , если явно не указано иное. Это означает, что значение, основанное на процентном соотношении, по-прежнему соответствует значению области содержимого элементов. Точно так же, если высота контейнера установлена в процентное значение, процентная высота дочерних элементов по-прежнему зависит от области содержимого этого дочернего элемента.
 Высота также может использоваться как анимируемое свойство.
 Поддержка браузера 
 IE  Edge  Firefox  Chrome  Safari  Opera
 Все  Все  Все  Все  Все  Все
 Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile Все Все Все Все Все
 Источник: caniuse
 Сопутствующие свойства 
 html — Как сделать div 100% высоты окна браузера 
 Есть пара единиц измерения CSS 3, называемых:
 Что такое длина области просмотра в процентах? 
 Из приведенной выше ссылки кандидата в рекомендации W3:
  Длина области просмотра в процентах зависит от размера исходного содержащего блока.Когда высота или ширина исходного содержащего блока изменяется, они соответственно масштабируются. 
 Эти единицы:  vh  (высота области просмотра),  vw  (ширина области просмотра),  vmin  (минимальная длина области просмотра) и  vmax  (максимальная длина области просмотра).
 Как это можно использовать, чтобы разделитель занимал всю высоту браузера? 
 Для этого вопроса мы можем использовать  vh :  1vh  равно 1% от высоты окна просмотра.То есть  100vh  равно высоте окна браузера, независимо от того, где находится элемент в дереве DOM:
 HTML 
   
  
 CSS 
  div {
    высота: 100вх;
}
  
 Это буквально все, что нужно. Вот пример  JSFiddle, который используется.
 Какие браузеры поддерживают эти новые модули? 
 В настоящее время поддерживается всеми основными современными браузерами, кроме Opera Mini.Проверьте Могу ли я использовать … для получения дополнительной поддержки.
 Как это можно использовать с несколькими столбцами? 
 В случае рассматриваемого вопроса, с левым и правым разделителями, вот пример JSFiddle, показывающий двухколоночный макет, включающий как  vh , так и  vw .
 Чем 
 100vh  отличается от  100% ?
 Возьмем, к примеру, эту схему:
  
    
         Привет, мир! 
    
 
  
 Тег  p  здесь установлен на 100% высоту, но поскольку он содержит  div  имеет высоту 200 пикселей, 100% 200 пикселей становятся 200 пикселей,  не  100% высоты  body .Использование  100vh  вместо этого означает, что тег  p  будет на 100% высотой тела   независимо от высоты  div . Взгляните на этот прилагаемый JSFiddle, чтобы легко увидеть разницу!
 html — Заставьте div заполнить высоту оставшегося места на экране 
 Я работаю над веб-приложением, в котором я хочу, чтобы содержимое занимало высоту всего экрана.
 У страницы есть заголовок, содержащий логотип и информацию об учетной записи.Это может быть произвольная высота. Я хочу, чтобы div с содержимым заполнил остальную часть страницы до самого низа.
 У меня есть заголовок  div  и контент  div . На данный момент я использую для раскладки такой столик:
 CSS и HTML
  #page {
    высота: 100%; ширина: 100%
}

#tdcontent {
    высота: 100%;
}

#содержание {
    перелив: авто; / * или переполнение: скрыто; * /
}  
  <таблица>
    
        
            ... 
        
    
    
        
             ... 
        
    
  
 Страница заполнена по всей высоте, прокрутка не требуется.
 Для всего, что находится внутри блока содержимого, установка  top: 0;  поместит его прямо под заголовком. Иногда содержимое представляет собой настоящую таблицу со 100% высотой.Помещение заголовка   внутри содержимого   не позволит этому работать.
 Есть ли способ добиться того же эффекта без использования стола  ?
  Обновление: 
 Элементы внутри содержимого  div  также будут иметь высоту в процентах. Таким образом, что-то на 100% внутри  div  заполнит его до самого низа. Как и два элемента на 50%.
  Обновление 2: 
 Например, если заголовок занимает 20% высоты экрана, таблица, указанная как 50% внутри  #content , займет 40% пространства экрана.Пока что просто обернуть все это в таблицу — это единственное, что работает.
 CSS высота 
 
 Пример
 <стиль>
 .external {
 фон: золото;
 высота: 150 пикселей;
 ширина: 150 пикселей;
 отступ: 20 пикселей;
 }
 .внутренний {
 фон: оранжевый;
 высота: 80%;
 }
 
 Свойство CSS  height  используется для указания высоты элемента.
 Более конкретно, свойство  height  устанавливает высоту области содержимого   или  граничной области  (в зависимости от значения свойства  размера блока ) определенных блоков.
 Вы можете использовать длину   или  процентов , чтобы указать высоту, или вы можете использовать одно из ключевых слов.
 См. Также свойства  max-height ,  width  и  max-width .
 Синтаксис 
высота: [<длина> | <процент>] | в наличии | мин-контент | max-content | подходящий контент | комплекс | авто
 Возможные значения 
  длина 
 Задает длину   значение высоты (например,  300 пикселей ).Отрицательные значения недопустимы.
  процентов 
 Задает  процентное значение  для высоты (например,  80% ). Это вычисляется как высота содержащего блок сгенерированного бокса. Отрицательные значения недопустимы.
   есть в наличии  
 Равно высоте содержащего блока за вычетом поля, границы и отступов текущего элемента.
   макс. Содержание  
 Максимальная высота содержимого.
   мин. Содержание  
 Высота минимального содержимого.
   подходящее содержание  
 Равно  max (min-content, min (max-content, available)) .
   подходящее содержание ( длина в процентах )  
 Если указано для встроенной оси, используется  min (максимальный размер содержимого, max (минимальный размер содержимого,  процент длины )) ; в противном случае вычисляется как  auto .
   авто  
 Высота зависит от значений других свойств. Браузер рассчитает высоту соответственно.
   комплекс  
 То же, что и  auto , за исключением того, что элементы со сложным соотношением сторон считаются имеющими внутреннее соотношение.
   растяжка  
 Использует размер блока  с растягиванием по строке  или  с размером блока с растягиванием , в зависимости от режима записи.
 Ключевое слово  Значения  всегда задают размер поля содержимого (на них не влияет свойство  размера поля ). Это не относится к значениям  длины  и  процентным значениям .
 Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента значения своего свойства:
  начальный 
 Представляет значение, указанное в качестве начального значения свойства.
  наследовать 
 Представляет вычисленное значение свойства родительского элемента.
  снято 
 Это значение действует как  наследует  или как  начальный , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.
 Общая информация 
 Начальное значение
  авто 
 Относится к
 Все, кроме столбцов таблицы, групп столбцов и незамещенных встроенных элементов.
 Category Css

Значение по умолчанию:	инструкция
Унаследовано:	да
Анимируемое:	нет. Читать about animatable
Версия:	CSS3
Синтаксис JavaScript:	объект .style.hyphens = «none»

Значение	Описание
нет	Слова без дефиса
инструкция	По умолчанию.Слова переносятся только через дефис &. или & застенчивый; (при необходимости)
авто	Слова переносятся там, где алгоритм решает (при необходимости)
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о начальных
унаследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

Объект	Описание
высота	Устанавливает высоту элемента
макс. Высота	Устанавливает максимальную высоту элемента
максимальная ширина	Устанавливает максимальную ширину элемента
мин. Высота	Устанавливает минимальную высоту элемента
Мин. Ширина	Устанавливает минимальную ширину элемента
ширина	Устанавливает ширину элемента