Что делать, если сайт «слишком короткий», а под футером есть пустое место?

Введение

Я видел много-много отличных веб-сайтов, созданных лучшими фронтенд-разработчиками, но эта проблема возникает на большинстве (если не на всех) сайтах. наличие нижних колонтитулов. Какой лучший кросс-браузерный метод, который удерживает нижний колонтитул в нужном месте?

Классная компоновка «шапка — контент — футер»:

Сломанная компоновка (происходит, когда сайт «слишком короткий»):

Обычно на небольших экранах все нормально, но это довольно часто в разрешениях 1680x1050 или FullHD.

Частичные исправления

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

• создание очень длинных нижних колонтитулов, но давайте предположим, что в этом случае мы хотим, чтобы они имели высоту только 20 пикселей.

• изменение цвета body { background:на цвет нижнего колонтитула сделает его менее уродливым, но пробел все равно останется.

• Возможно, это некоторые приемы JavaScript, такие как получение высоты окна и изменение положения/размера некоторых элементов, но звучит как излишество.

Рабочие исправления

Похоже, что по-прежнему лучше всего делать сайты достаточно длинными, чтобы они поместились даже на самых больших экранах (ну, это очевидно).

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

Спасибо!