Как заставить нижний колонтитул оставаться внизу веб-страницы?

У меня есть простой 2-колоночный макет с нижним колонтитулом, который очищает правый и левый div в моей разметке. Моя проблема в том, что я не могу заставить нижний колонтитул оставаться внизу страницы во всех браузерах. Это работает, если контент толкает нижний колонтитул, но это не всегда так.

Обновить:

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

Источник

33 ответа

Решение

Чтобы получить липкий нижний колонтитул:

  1. Есть <div> с class="wrapper" для вашего контента.

  2. Прямо перед закрытием </div> из wrapper поместите<div class="push"></div>,

  3. Сразу после закрытия </div> из wrapper поместите <div class="footer"></div>,

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
Источник

Используйте CSS VH единиц!

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

Возьмем для примера следующую простую разметку:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

Если заголовок имеет высоту 80px, а нижний колонтитул - 40px, то мы можем создать липкий нижний колонтитул с одним правилом для содержимого div:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

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

Вот и все.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

... и вот как работает тот же код с большим количеством контента в div контента:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

NB:

1) Высота верхнего и нижнего колонтитула должна быть известна

2) Старые версии IE (IE8-) и Android (4.4-) не поддерживают единицы просмотра. ( caniuse)

3) Когда-то давно у webkit была проблема с единицами просмотра в рамках правила calc. Это действительно было исправлено ( см. Здесь), поэтому там нет никаких проблем. Однако, если вы по какой-то причине не хотите использовать calc, вы можете обойти это, используя отрицательные поля и отступы с изменением размера блока -

Вот так:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

Источник

Липкий нижний колонтитул с display: flex

Решение вдохновлено липким нижним колонтитулом Филиппа Уолтона.

объяснение

Это решение действительно только для:

  • Хром ≥ 21.0
  • Firefox ≥ 20,0
  • Internet Explorer ≥ 10
  • Safari ≥ 6.1

Он основан на flex дисплей, используя flex-grow свойство, которое позволяет элементу расти в высоту или ширину (когда flow-direction установлен либо column или же row соответственно), чтобы занять дополнительное место в контейнере.

Мы собираемся использовать также vh единица, где 1vh определяется как:

1/100 высоты окна просмотра

Поэтому высота 100vh это краткий способ сказать элементу, чтобы охватить всю высоту области просмотра.

Вот как вы бы структурировали свою веб-страницу:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

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

Поэтому наш макет становится:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

Реализация 

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}
<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

Вы можете играть с ним в JSFiddle.

Причуды Сафари

Имейте в виду, что Safari имеет некорректную реализацию flex-shrink свойство, которое позволяет элементам сжиматься больше минимальной высоты, необходимой для отображения содержимого. Чтобы решить эту проблему, вам нужно установить flex-shrink свойство явно 0 до .content и footer в приведенном выше примере:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }
Источник

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

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}
Источник

Вот решение с JQuery, которое работает как шарм. Он проверяет, больше ли высота окна, чем высота тела. Если это так, то он меняет верхний колонтитул нижнего колонтитула для компенсации. Протестировано в Firefox, Chrome, Safari и Opera.

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

Если у вашего нижнего колонтитула уже есть поле с полями (например, 50 пикселей), вам нужно изменить последнюю часть для:

css( 'margin-top', height_diff + 50 )
Источник

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

position: absolute;
bottom: 0;

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

Кроме того, если я правильно помню, IE6 имеет проблемы с bottom: 0 CSS. Возможно, вам придется использовать решение JS для IE6 (если вам небезразлично IE6).

Источник

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Источник: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

Источник

Решение, похожее на @gcedo, но без добавления промежуточного содержимого, чтобы сдвинуть нижний колонтитул. Мы можем просто добавить margin-top:auto в нижний колонтитул, и он будет перемещен в конец страницы, независимо от его высоты или высоты содержимого выше.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}
<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

Источник

Только что изобрел очень простое решение, которое отлично мне подошло. Вы просто оборачиваете все содержимое страницы, кроме нижнего колонтитула, в div, а затем устанавливаете минимальную высоту на 100% от точки обзора за вычетом высоты нижнего колонтитула. Нет необходимости в абсолютном позиционировании в нижнем колонтитуле или нескольких разделах-оболочках.

Источник

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

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

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

Источник

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

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

Вот пример:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

Источник

Так как решение Grid еще не было представлено, вот оно, с двумя объявлениями для родительского элемента, если мы возьмем height: 100% а также margin: 0 как должное:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>

  • align-content: space-between

Элементы равномерно распределены внутри юстировочного контейнера вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Первый элемент находится на одном уровне с основным краем, а последний элемент находится на одном уровне с основным краем.

Источник

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

Источник

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

html {
    min-height: 100%;
    position: relative;
}

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

Просто установите html на min-height: 100%; а также position: relative;, тогда position: absolute; bottom: 0; left: 0;в нижнем колонтитуле. Затем я убедился, что нижний колонтитул был последним элементом тела.

Сообщите мне, если это не сработает для кого-то еще и почему. Я знаю, что эти утомительные стилистические приемы могут вести себя странно в различных обстоятельствах, о которых я не думал.

Источник

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

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

Источник

На этот вопрос многие ответы, которые я видел, являются неуклюжими, сложными для реализации и неэффективными, поэтому я решил попробовать и найти собственное решение, представляющее собой чуть-чуть CSS и HTML.

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}
<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

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

Источник

На своих сайтах я всегда использую:

      position: fixed;

... в моем CSS для нижнего колонтитула. Это привязывает его к нижней части страницы.

Источник

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

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

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

Источник

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

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

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

Источник 

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }
  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>

Источник

Быстрое простое решение с использованием flex

  • Дай htmlа также bodyвысота 100%
      html,
body {
  width: 100%;
  height: 100%;
}
  • Отобразить тело как flexс columnнаправление:
      body { 
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
  • Добавлять flex-grow: 1для главного
      main {
  flex-grow: 1;
}

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

Источник

Сохранение вашего<main>поскольку min-height 90vh решит вашу проблему навсегда. Вот базовая структура, которая поможет вам следовать семантике и охватывать всю страницу.

Шаг 1: Сохраните все внутри основного тега, кроме верхнего и нижнего колонтитула.

      <body>
    <header>
        <!╌ nav, logo ╌> 
    </header>
    <main>
        <!╌ section and div ╌> 
    </main>
    <footer>
        <!╌ nav, logo ╌>
    </footer>
</body>

Шаг 2: Добавьте минимальную высоту: 90vh для основного

      main{
    min-height: 90vh;
}

Обычно верхний и нижний колонтитулы имеют минимальную высоту 70 пикселей, поэтому этот случай работает хорошо, проверено и протестировано!

Источник

Взгляните на http://1linelayouts.glitch.me/, пример 4. Уна Кравец решает эту проблему.

Это создает трехуровневую страницу с верхним, основным и нижним колонтитулами.

-Ваш нижний колонтитул всегда будет находиться внизу и использовать пространство для размещения содержимого;

-Ваш заголовок всегда будет наверху и будет занимать пространство, чтобы соответствовать содержимому;

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

HTML

      <div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>

CSS

      .parent {
  display: grid;
  height: 95vh; /* no scroll bars if few content */
  grid-template-rows: auto 1fr auto;
}
Источник

JQuery CROSS BROWSER CUSTOM PLUGIN - $.footerBottom()

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

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

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

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

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

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

//import jQuery library before this script


// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

Источник

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

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

Я получил это из ответа ctf0 на https://css-tricks.com/couple-takes-sticky-footer/

Источник

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

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
Источник

Дружественное решение REACT- (разделитель не требуется)

Крис Койер (почтенный веб-сайт CSS-Tricks) постоянно обновлял свою страницу в Sticky-Footer, используя по крайней мере ПЯТЬ методов для создания липкого нижнего колонтитула, включая использование FlexBox и CSS-Grid.

Почему это важно? Потому что для меня более ранние / старые методы, которые я использовал в течение многих лет, не работали с React - мне пришлось использовать решение Flexbox Криса, что было легко и работало.

Ниже приведен его липкий нижний колонтитул flexboxCSS-Tricks - просто посмотрите на код ниже, он не может быть проще.

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

html,body{height: 100%;}
body     {display:flex; flex-direction:column;}
.content {flex: 1 0 auto;} /* flex: grow / shrink / flex-basis; */
.footer  {flex-shrink: 0;}

/* ---- BELOW IS ONLY for demo ---- */
.footer{background: palegreen;}
<body>
  <div class="content">Page Content - height expands to fill space</div>
  <footer class="footer">Footer Content</footer>
</body>

Крис также демонстрирует это решение CSS-Grid для тех, кто предпочитает сетку.

Ссылки:

CSS-Tricks - Полное руководство по Flexbox

Источник

Решение Flexbox

Гибкая компоновка предпочтительна для естественной высоты верхнего и нижнего колонтитула Это гибкое решение протестировано в современных браузерах и фактически работает:) в IE11.

Смотрите JS Fiddle.

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}
Источник

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

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

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

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

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

Источник

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

#my_footer {
    position: static
    fixed; bottom: 0
}
Источник
Другие вопросы по тегам