Как установить минимальную высоту сайта по размеру экрана?

Question

[Александр Руснак]

Здравствуйте! Разрабатываю сайт на wordpress (тема vantage). Ссылка : majorpayne.ru

Проблема: Установка минимальной высоты тела сайта. При установке минимальной высоты сайта (через custom CSS) в пикселях или иных единицах измерения (кроме %) на моем мониторе высота тела сайта приемлема, однако при просмотре с мобильных устройств после футера выглядывает задний фон иными словами тело слишком короткое. Подбор высоты в пикселях является неприемлемым, так как экраны у всех разные. На мои попытки установить минимальную высоту тела в процентах сайт не реагировал. (В настройках сайта указал свойство boxed)

Просьба поделится своими мыслями на этот счет или предложить решение проблемы.

Answer 1

[Александр Руснак]

Утсановил этот код — meta(name="viewport", content="width=device-width, initial-scale=1.0") в header.php

Данный код написал в custom CSS : #main.site-main {
min-height: 100vh;
} — только данный участок кода влияет на высоту

Не понял какую роль в данной ситуации играет мета тег meta(name="viewport", content="width=device-width, initial-scale=1.0") касательно высоты сайта, width я заменил на height, однако данный мета тег никак не повлиял на высот (минимальную высоту) контента сайта.

Comments

[Vatrush]

этот мета влияет на адаптивность твоей страницы

[Артем]

https://developer.mozilla.org/ru/docs/Mozilla/Mobi...
https://itchief.ru/lessons/html-and-css/meta-viewp...

[Александр Руснак]

Vatrush, А почему при 100 vh контент тело вылезает за пределы экрана на айфоне?

[Vatrush]

RusnakAlexander, верстка кривая

Answer 2

[Alex]

html, body, #site-container { min-height: 100vh }