max-height
==========

Свойство CSS **`max-height`** устанавливает максимальную высоту элемента. Оно предотвращает используемое значение свойства `height` от становления больше, чем значение, указанное для `max-height`.

Интерактивный пример
--------------------

`max-height` перекрывает `height`, но `min-height` перекрывает `max-height`.

Синтаксис
---------


```css
/\* Ключевые слова \*/
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/\* Значения длины \*/
max-height: 3.5em;

/\* <percentage> значения \*/
max-height: 75%;

/\* Глобальные значения \*/
max-height: inherit;
max-height: initial;
max-height: unset;
```

### Значения

`<length>`

Максимальная высота выражается как `<length>`.

`<percentage>`

Максимальная высота выражается как `<percentage>` от высоты родительского блока.

#### Значения-ключевые слова

`none`

Высота не имеет максимального значения.

`max-content`
Экспериментальная возможность

Внутренняя предпочтительная высота.

`min-content`
Экспериментальная возможность

Внутренняя минимальная высота.

`fill-available`
Экспериментальная возможность

Высота родительского блока минус вертикальные `margin`, `border`, и `padding`. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., `available`.)

`fit-content`
Экспериментальная возможность

То же что и `max-content.`

### Формальный синтаксис
```

max-height =   
  none                                      | (en-US)  
  <length-percentage [0,∞]>                 | (en-US)  
  min-content                               | (en-US)  
  max-content                               | (en-US)  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

Примеры
-------


```css
table {
  max-height: 75%;
}

form {
  max-height: none;
}
```

Проблемы доступности
--------------------

Убедитесь, что элементы с `max-height` не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок |
| Наследуется | нет |
| Проценты | Процент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот элемент позиционирован не абсолютно, процентное значение интерпретируется как `none`. |
| Обработка значения | проценты, как указаны, абсолютная длина или `none` |
| Animation type | длина, проценты или calc(); |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Блочная модель (en-US)
* `max-width`, `box-sizing`, `height`, `min-height`