Как сделать чтобы блок был на всю высоту вьюпорта при любом разрешении?

Question

[keruhass]

Суть вопроса вот в чём, у меня есть блок высотой в 100vh, следовательно, он занимает всю высоту вьюпорта. Значит при изменении высоты окна браузера блок будет соответственно уменьшаться. Но мне нужно, что бы окно браузера обрезало видимость этого блока, а не уменьшало его размеры. Казалось бы, решение проблемы максимально простое, указать для окна min-height в пикселях и все. Но в таком случае, на устройствах с большим разрешением чем моё, блок уже не будет занимать всю высоту вьюпорта. Каким образом можно наиболее рационально решить данную проблему?

Comments

[Вадим]

указать для окна min-height в пикселях и все. Но в таком случае, на устройствах с большим разрешением чем моё, блок уже не будет занимать всю высоту вьюпорта.

Почему?
height: 100vh;
min-height: 1000px;

Будет расстягиваться на всю высоту но не менее 1000 пикселей. Соответственно, на десктопе будет на всю высоту, на мобилках 1000пикселей.

Ну и проблему Вы толком не обозначаете. Лишь описываете поведение работы CSS которое многие итак тут знают.

[Ankhena]

Свойство overflow обрезает всё, что выпирает.
На мобилках не применится к body.

[Aetae]

Очевидно, только следить скриптом и ставить им min-height, что-то типа:

let minHeight = 0;
let element = ...;
addEventListener('resize', () => {
  const { clientHeight } = document.documentElement;
  if (minHeight > clientHeight) return;
  element.style.minHeight = `${minHeight = clientHeight}px`;
});

Только учитывай всё, что написал Антон Антон .

Answer 1

[Антон Антон]

Высота вьюпорта - это как раз и есть динамическая высота окна. При этом невозможно предсказать его максимальные размеры, даже зная разрешение (потому как высота панелей и прочих элементов управления может быть разная). При этом нужно учитывать, что сама высота окна при открытии страницы может быть не максимальная - браузер может быть не развернут на весь экран.
Как заляпуху можно устанавливать высоту в 100% в пикселях (clientHeight) и потом отслеживать изменение размера и неуменьшать её. Но это все равно косяк, так как не учитывает случая поворота экрана (а такое бывает даже на стационарных компьютерах например с поворотными мониторами) и перенос окна между мониторами с разными разрешениями или чего-нибудь типа изменения масштаба.

Надо искать другое решение исходной задачи.