# Свойство clientHeight

Свойство `clientHeight` содержит высоту элемента внутри границ вместе с `padding`, но без `border` и прокрутки.

## Синтаксис

`элемент.clientHeight;`

## Пример

Давайте найдем размер элемента:

`#elem { width: 100px; height: 100px; border: 1px solid black; padding: 15px; }` `<div id="elem"></div>` `let elem = document.querySelector('#elem'); console.log(elem.clientHeight);`

Результат выполнения кода:

`130`

## Пример

Если у элемента появляется прокрутка то ширина содержимого уменьшается на ширину прокрутки (около `16px` - зависит от браузера, ОС, устройства). В следующем примере ширина элемента будет меньше, чем ожидалось:

`<div id="elem">У этого элемента есть прокрутка.</div>` `#elem { width: 100px; height: 100px; border: 1px solid black; padding: 15px; overflow: scroll; }` `let elem = document.querySelector('#elem'); console.log(elem.clientHeight);`

Результат выполнения кода:

`114 (зависит от браузера)`

## Пример

Если элемент скрытый, то `clientHeight` будет равен `0`:

`<div id="elem"></div>` `#elem { width: 100px; height: 100px; border: 1px solid black; display: none; /* скрытый элемент */ }` `let elem = document.querySelector('#elem'); console.log(elem.clientHeight);`

Результат выполнения кода:

`0`

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

- свойство `clientWidth`,
  которое содержит ширину элемента внутри границ
- метод `getComputedStyle`,
  который получает значение CSS свойства элемента

← →
↑
en ru