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

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

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

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

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

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

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

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

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