CSS:

  #container {width: 100%;  высота: 100vh;  } # container.footer {float: left;  ширина: 100%;  высота: 20vh;  Запас-топ: 80vh;  фон-цвет: красный;  }  

HTML:

  & lt; div id = "container" & gt;  & lt; div class = "footer" & gt;  & Lt; / дел & GT;  & Lt; / дел & GT;   

Это должно сделать трюк, если вы ищете отзывчивый нижний колонтитул, выровненный в нижней части страницы, который всегда держит верхний край 80% высоты окна просмотра.

jQuery CROSS BROWSER CUSTOM PLUGIN - $ .footerBottom ()

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

Вот как вы запускаете плагин. Импортируйте jQuery, скопируйте код этого настраиваемого плагина jQuery и импортируйте его после импорта jQuery! Это очень простой и простой, но важный.

Когда вы это сделаете, все, что вам нужно сделать, это запустить этот код:

  $. footerBottom ({target: "footer"});  // как html5 tag & lt; footer & gt ;.  // Вы можете изменить его на ваш предпочтительный «div», например, на класс «footer» //, установив цель в {target: «div.footer»}  

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

Вот код плагина, который вам не нужно понимать. Просто знайте, как его реализовать. Это делает для вас работу. Однако, если вам нравится знать, как это работает, просто просмотрите код. Я оставлял комментарии для вас.

  // импортировать библиотеку jQuery перед этим скриптом  

Я сам иногда с этим боролся, и я всегда находил, что решение со всеми этими div внутри друг друга было беспорядочным решением. Я немного испортил его, и я лично узнал, что это работает, и это, безусловно, один из самых простых способов:

  html {position: relative;  } html, body {margin: 0;  заполнение: 0;  мин-высота: 100%;  } footer {position: absolute;  bottom: 0;  }  

Что мне нравится в этом, так это то, что дополнительный HTML не должен применяться. Вы можете просто добавить этот CSS, а затем написать свой HTML как всегда

Вы можете использовать position: absolute , чтобы поместить нижний колонтитул в нижней части страницы, но затем убедитесь, что ваши 2 столбца имеют соответствующий край внизу , так что они никогда не закрываются нижним колонтитулом.

  #footer {position: absolute;  bottom: 0px;  ширина: 100%;  } #content, #sidebar {margin-bottom: 5em;  }  

Одним из решений было бы установить минимальную высоту для полей. К сожалению, кажется, что это не очень хорошо поддерживается IE (сюрприз).

Для этого вопроса многие из ответов, которые я видел, неуклюжи, сложны в реализации и неэффективны, поэтому я подумал, что сделаю это, и придумаю мое собственное решение, которое представляет собой всего лишь крошечный бит css и html [ ! d4]

, это работает, устанавливая высоту нижнего колонтитула, а затем используя css calc для определения минимальной высоты страницы с нижним колонтитулом, находящимся на внизу, надеюсь, это поможет некоторым людям:)

Попробуйте положить контейнер div (с переполнением: автоматически) вокруг содержимого и боковой панели.

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

Для меня самый лучший способ его отображения (нижний колонтитул) прилипает к дну, но не покрывает контент все время:

  #my_footer {position: static fixed;  bottom: 0}  

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

Как уже упоминалось, большинство простой способ сделать это так.

  html {position: relative;  мин-высота: 100%;  } body {background-color: transparent;  позиция: статическая;  высота: 100%;  margin-bottom: 30px;  } .site-footer {position: absolute;  высота: 30 пикселей;  bottom: 0px;  left: 0px;  right: 0px;  }  

Однако свойство, не упоминаемое в сообщениях, по-видимому, потому, что оно обычно является по умолчанию, является позицией: static в теге body. Позиция относительная не будет работать!

Моя тема Wordpress переопределила отображение тела по умолчанию, и это смутило меня в течение долгого времени.

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

  footer {position: fixed;  право: 0;  bottom: 0;  left: 0;  обивка: 1rem;  background-color: #efefef;  text-align: center;  }  

Установите CSS для #footer :

  position: absolute;  bottom: 0;   

Затем вам нужно будет добавить поле padding или в нижней части вашего #sidebar и #content , чтобы соответствовать высоте #footer , или когда они перекрываются, #footer покроет их.

Также , если я правильно помню, IE6 имеет проблему с дном : 0 CSS. Возможно, вам придется использовать JS-решение для IE6 (если вам небезразличен IE6).

Ни один из этих чистых css-решений не работает корректно с динамическим изменением размера контента (по крайней мере, в Firefox и Safari), например, если у вас есть фоновый набор на контейнере div, страница и затем изменить размер (добавление нескольких строк) таблицы внутри div, таблица может торчать из нижней части стилизованной области, т. е. вы можете иметь половину стола в белом на черной теме, а половину стола - белую, так как цвет шрифта и цвет фона белый.

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

Единственное не-скриптовое решение, которое работает во всех браузерах, которые я пробовал: гораздо более простая / короткая таблица с темой (для заголовка) / tfoot (для нижнего колонтитула) / tbody (td для любого количества столбцов) и высотой 100%. Но это восприняло семантические и SEO-недостатки (tfoot должен появиться перед телом. Роли ARIA могут помочь достойным поисковым системам, хотя).

Используйте абсолютное позиционирование и z-index для создания липкого нижнего колонтитула с любым разрешением, используя следующие шаги:

• Создайте нижний колонтитул с position: absolute; bottom: 0; и желаемая высота
• Установите дополнение нижнего колонтитула, чтобы добавить пробел между нижней частью содержимого и нижней частью окна
• Создать контейнер div , который обертывает содержимое тела с помощью позиции : relative; min-height: 100%;
• Добавить нижнее дополнение к основному содержимому div , равное высоте и дополнению нижнего колонтитула
• Установите нижний колонтитул z [] d4] больше, чем контейнер div , если нижний колонтитул обрезается