Свойство экрана: availHeight

Только для чтения Screen интерфейса availHeight свойство возвращает высоту, в пикселях CSS, доступного пространства для веб-контента на экране. Поскольку Screen экспонируется в свойстве Window интерфейса window.screen, вы получаете доступ к availHeight используя window.screen.availHeight.

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

Числовое значение, указывающее высоту доступного пространства экрана в пикселях CSS. Оно не может быть больше значения window.screen.height и будет меньше, если устройство или пользовательский агент зарезервируют вертикальное пространство для себя.

Например, на Mac, у которого панель Dock расположена внизу экрана (по умолчанию), значение availHeight приблизительно равно значению height (общая высота экрана в пикселях CSS) минус высоты панели Dock и строки меню, как показано на диаграмме ниже. Они занимают availHeight только если всегда отображаются: если страница в полноэкранном режиме или панель Dock настроена на автоматическое скрытие/отображение, то они не учитываются в availHeight.

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

В главном окне, когда пришло время открыть панели, используется код, подобный следующему.

const paletteWindow = window.open(
  "panels.html",
  "Panels",
  "left=0, top=0, width=200",
);

HTML окна панелей, в panels.html, содержит собственный JavaScript-код, который выполняется сразу после создания окна. Ему даже не нужно ждать какого-либо события (или вообще никакого события). Этот код обрабатывает изменение размера окна в соответствии с доступным пространством:

window.outerHeight = window.screen.availHeight;

Результат примерно такой. Обратите внимание, что окно Панелей занимает всё доступное вертикальное пространство слева на экране.

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

• Window
• Screen
• Screen.availWidth
• Window.innerHeight