Какую высоту нужно задать блоку, чтобы верхний и нижний край не выходили за рамки дисплея?

Question

[serhgons]

Разрабатываю блок с информацией, и нужно чтобы когда со смартфона открывали сайт, этот блок ровно вписывался по высоте в дисплей и не выходил за рамки. Так, чтобы пользователь просматривающий блок мог сделать скриншот этого блока и всё туда в один скрин вписалось.
Размеры дисплеев так скажем разные ведь, от iPhone 6 до iPhone Max версий. Как сделать так, чтобы для всех смартфонов с разными размерами дислпеев блок не выходил за рамки?

Comments

[Ankhena]

Про 100vh сказали. Только не забудьте про волшебные хаки, чтобы он работал как вам понравится.

А главное, подумайте, а лучше нарисуйте, как будет вписываться контент при разных размерах. Иногда это бывает просто, а иногда не очень, в зависимости от этого самого контента.

Answer 1

[sharpsss]

Попробуйте использовать vh - 100vh
Единица vh соответствует 1% от высоты области просмотра браузера, таким образом, 100vh равно всей высоте области просмотра.
Единица измерения vh вычисляет значение напрямую относительно окна браузера.

Comments

[serhgons]

Спасибо, попробую так сделать. Подскажите если в курсе, а ширину тоже нужно будет задавать? Или она автоматом от высоты рассчитает?

[sharpsss]

serhgons, по стандарту если не задавать ширину , то width = auto , а это значит что родительский блок подстраиваться будет под то что внутри, полагаю нужно будет задать ему width:100%;