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

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

обновление:

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

247
css footer html sticky-footer

23 ответов

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

  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 */
}
190

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

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

возьмите, например, следующую простую разметку:

<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% высоты видового экрана минус комбинированные высоты верхнего и нижнего колонтитулов.

69

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

решение вдохновлен липкий футер Филипа Уолтона.

объяснение

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

  • хром ≥ 21.0
  • Firefox ≥ 20.0
  • Internet Explorer ≥ 10
  • Safari ≥ 6.1

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

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

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

поэтому высота 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; }
41

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

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}
31

вот решение с 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 )
13

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

position: absolute;
bottom: 0;

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

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

11

аналогичное решение @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>
3

используйте абсолютное позиционирование и Z-индекс для создания липкого нижнего колонтитула 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>
2

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

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

1

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

1

ни одно из этих чистых решений css не работает должным образом с динамическим изменением размера содержимого (по крайней мере, в firefox и Safari), например, если у вас есть фон, установленный на контейнере div, страница, а затем изменить размер (добавив несколько строк) таблицы внутри div, таблица может торчать из нижней части стилизованной области, т. е. вы можете иметь половину таблицы в Белом на черной теме и половину таблицы в белом цвете, потому что и цвет шрифта, и цвет фона белый. Это в основном unfixable с themeroller страницы.

вложенный div Multi-column layout-уродливый хак, а 100% min-height body / container div для приклеивания нижнего колонтитула-уродливый Хак.

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

1

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% высоты окна просмотра.

1

для этого вопроса многие из ответов, которые я видел, неуклюжи, трудно реализовать и неэффективны, поэтому я подумал, что я бы выстрелил в него и придумал свое собственное решение, которое является всего лишь крошечным 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 для разработки минимальной высоты страницы может быть с нижним колонтитулом все еще внизу, надеюсь, это поможет некоторым людям:)

1

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

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

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

1

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

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

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;
}

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

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

0

старый поток, который я знаю, но если вы ищете отзывчивое решение, это дополнение jQuery поможет:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

Полное руководство можно найти здесь: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

0

Я создал очень простую библиотеку https://github.com/ravinderpayal/FooterJS

Он очень прост в использовании. После включения библиотеки просто вызовите эту строку кода. 

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

нижние колонтитулы могут быть динамически изменены путем вспоминать вышеуказанную функцию с различным параметром / ИД. 

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

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

другим решением является css Media Queries, но вы должны вручную писать разные стили CSS для разных размеров экранов, в то время как эта библиотека работает автоматически и поддерживается всеми базовыми JavaScript поддержки браузер.

редактировать Решение CSS:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

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

и, кажется, это лучшее решение, чем JavaScript / библиотека.

0

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

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
0

решение Flexbox

гибкий макет является предпочтительным для физических header и footer высот. Это решение flex тестируется в современных браузерах и фактически работает :) в 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;
}
0

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

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

jQuery кросс-браузер пользовательский плагин -$.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>
0

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

    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/

0

С решетки решение еще не представлено, вот оно, всего с двумя декларации на родительский элемент, если мы возьмем 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>

детали равномерно распределены внутри контейнер выравнивания вдоль оси Креста. Расстояние между каждой парой смежных пунктов тот же. Первый элемент заподлицо с основным начальным краем, а последний деталь полн с краем main-end.

0