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

Question

Введение

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

Классный макет "заголовок - содержимое - нижний колонтитул":

Сломанный макет (происходит, когда сайт "слишком короткий"):

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

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

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

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

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

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

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

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

---

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

Спасибо!

Answer 1

Я видел, что это называется «Липкий нижний колонтитул», и опубликовано несколько решений.

Answer 2

применить CSS к разделу контента:

#content{
    min-height:600px;
}

Answer 3

Это вопрос дизайна, звучит так, будто вы просто «липкий нижний колонтитул» - в этом случае взгляните на этот вопрос:

Как перенести нижний колонтитул в конец страницы, если содержание короткое или отсутствует?

Или перейти прямо на связанный сайт:

http://www.cssstickyfooter.com/

В любом случае, липкий нижний колонтитул или нет (чаще нет, для меня, я должен сказать), я обычно использую минимальную высоту для моего содержимого div, чтобы действительно короткие страницы не выглядели глупо.

Answer 4

Сделайте так, чтобы нижний колонтитул имел это как CSS:

.container {
  position: relative;
}
.footer {
  position: absolute;
  bottom: 0;
}

Markup:

<div class="container">
<div class="footer">...</div>
</div>

Это будет располагаться внизу. Если вам нужно место, добавьте поле снизу (margin-bottom: xxxpx;).