Высота содержимого: свойство height Синтаксис: height: <размер> | <процент> | auto | inherit Начально: auto Применимо: ко всем элементам, кроме текстовых, столбцов таблиц и групп столбцов Наследуемо: нет Проценты: относительно высоты вмещающего блока Устройства: визуальные Поддержка : Соответствует стандарту (5.0+) Соответствует стандарту (4.0+) Свойство height задает высоту содержимого при генерации объемлющего прямоугольника блочных элементов и элементов, внешних по отношению к CSS (т. е. графических образов, объектов, аплетов и т. п.). Отметим, что высота текстовых элементов задается свойством line-height. Высота не может быть отрицательной и задается одним из следующих способов: <размер> Задает фиксированный размер. <процент> Вычисляется относительно высоты вмещающего блока. Если эта высота явно не задана, то значение интерпретируется как auto. auto См. этот раздел Пример: следующее правило устанавливает высоту абзаца, равной 100 пикселей. P { height: 100px } Если высота какого-то абзаца будет превышать 100 пикселей, то такой абзац отображается в соответствии со значением свойства overflow. Вычисление высот и границ Вычисленные значения свойств height, margin-top, margin-bottom, top и bottom зависят от типа генерируемого прямоугольника. Как правило, вычисленное значение совпадает со специфицированным (кроме значения auto, которое заменяется на вычисленное значение по умолчанию), но есть и исключения. Различаются следующие типы элементов: блочные и текстовые; внешние по отношению к CSS и прочие; плавающие и нет; абсолютно позиционированные и остальные. Обратите внимание, что для относительно позиционированных элементов значения перечисленных свойств вычисляются так же, как для непозиционированных. Не внешние текстовые элементы Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Свойство height здесь не применимо, но высоту такого элемента можно задать свойством line-height. Внешние элементы (текстовые, блочные в обычном потоке элементов и плавающие) Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Специфицированное значение auto свойства height заменяется вычисленным значением высоты соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа). Не внешние блочные элементы (в обычном потоке элементов или плавающие) Специфицированное значение auto свойств margin-top, margin-bottom, top и bottom заменяется вычисленным значением 0. Если height равно auto, то его вычисленное значение зависит от того, имеет ли данный элемент блочных детей. Если все его дети являются текстовыми, то высота элемента вычисляется как расстояние от верхней линии самого верхнего строчного блока до нижней линии самого нижнего строчного блока. Если же элемент имеет блочных детей, то его высота вычисляется как расстояние от верхнего края рамки самого верхнего блока до нижнего края рамки самого нижнего блока. При этом учитываются только те дети, которые находятся в обычном потоке элементов (иными словами, плавающие и абсолютно позиционированные элементы игнорируются, а относительно позиционированные учитываются без своего смещения). Не внешние абсолютно позиционированные элементы Вычисленные значения свойств связаны между собой следующим соотношением: top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = высота вмещающего блока При этом вычисление значений свойств производится в следующем порядке: Если top равно auto, то auto заменяется на расстояние от верхнего края вмещающего блока до верхней границы гипотетического прямоугольника, который был бы первым объемлющим прямоугольником данного элемента, если бы он был статическим. Это значение отрицательно, если гипотетический прямоугольник расположен выше объемлющего блока. Если и height, и bottom равны auto, то значение auto для bottom заменяется на 0. Если bottom или height все еще равны auto, то значения auto для margin-top и margin-bottom заменяются на 0. Если margin-top и margin-bottom все еще равны auto, то их значения вычисляются из приведенного выше соотношения так, чтобы они были равны между собой. Если к этому моменту только одно значение равно auto, то оно вычисляется из приведенного соотношения. Если оказалось, что было задано слишком много явных значений, то пересчитывается на основе приведенного соотношения значение bottom. Внешние абсолютно позиционированные элементы Вычисления производятся так же, как в предыдущем случае, но с одним отличием. Если height равно auto, то оно заменяется вычисленным значением высоты соответствующего объекта (которая задается либо его собственными размерами, либо атрибутом языка документа), а затем производятся все перечисленные расчеты. Минимальная и максимальная высота: свойства min-height и max-height Синтаксис: min-height: <размер> | <процент> | inherit Начально: определяется обозревателем Применимо: ко всем элементам, кроме текстовых и табличных Наследуемо: нет Проценты: относительно высоты вмещающего блока Устройства: визуальные Синтаксис: max-height: <размер> | <процент> | none | inherit Начально: none Применимо: ко всем элементам, кроме текстовых и табличных Наследуемо: нет Проценты: относительно высоты вмещающего блока Устройства: визуальные Поддержка : Не поддерживаются Не поддерживаются Эти свойства позволяют нам ограничить высоту содержимого при генерации объемлющего прямоугольника минимально и максимально допустимыми значениями. Высота не может быть отрицательной и задается одним из следующих способов: <размер> Задает фиксированный размер. <процент> Вычисляется относительно высоты вмещающего блока. Если эта высота явно не задана, то значение интерпретируется как auto. none Неограниченная высота прямоугольника. Эти свойства применяются следующим образом. Сначала вычисляется свойство height, как описано в разделе 2.6.5. Затем проверяется, попадает ли оно в диапазон от min-height до max-height, и, если нет, то вычисленное значение height заменяется на соответствующее предельно допустимое значение. Пример: следующее правило устанавливает пределы для высоты абзаца. P { min-height: 200px; max-height: 1000px } <<<  Назад Вперед  >>>  1  2  3  4  5  6   8  Комментарии к статье  8 8  Обсудить в чате

8  В тему Введение в таблицы стилей Селекторы, псевдоклассы и псевдоэлементы Значения свойств, каскадность и наследование Границы, заполнители и рамки Позиционирование элементов Цвет и фон Шрифты Текст Таблицы Генерация содержимого, нумерация и списки Страничные устройства вывода Звуковые таблицы стилей