Как я могу предотвратить появление этого негативного пробела на моем сайте?

Question

Я уже некоторое время работаю над устранением этой проблемы, на моем веб-сайте есть страницы с меньшим или меньшим содержанием, или, если он отображается на большом экране, он показывает пробел прямо под нижним колонтитулом.

"как показано здесь (https://imgur.com/ATR59Ts)"

Я пытался использовать высоту: 100%, но он не работает, если экран маленький, потому что, если я помещу высоту: 100% в теле {}, это приведет к тому, что элементы внутри тела будут перекрывать тело и вызывать белый цвет пространство.

"как показано здесь (https://imgur.com/3fWTNZE)"

Я понятия не имею, с чем еще можно повозиться, чтобы не допустить этот пробел.

• Я пытался добавить высоту: 100% в теле, html (не работает на маленьких экранах, когда я добавляю больше элементов в мои div.

body, html{
    margin: 0;
    padding: 0;
    width: 100%;
    /* height: 100%; */
    /* overflow: scroll; */
}

Я ожидал, что результат сделает тело всегда на 100% на всех возможных экранах, но элемент переполнится над телом и вызовет пробелы.

Answer 1

Похоже, содержимое в контейнере меньше размера экрана? Тогда вы можете использовать min-height:100vh в стиле основного контейнера. Это сделает его минимальный размер равным размеру окна. Пример на Codepen

Answer 2

Можете ли вы связать нас с вашим сайтом, чтобы мы могли увидеть проблему?