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

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

Обновление:

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

ОТВЕТЫ

Ответ 1

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

  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 height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Ответ 2

Используйте CSS vh units!

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

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

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

Если заголовок имеет высоту 80 пикселей, а нижний колонтитул - 40 пикселей, мы можем сделать наш липкий нижний колонтитул с одним единственным правилом в содержимом 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>

Ответ 3

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

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

объяснение

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

  • Chrome ≥ 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>

Ответ 4

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

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

Ответ 5

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

Ответ 6

Задайте CSS для #footer для:

position: absolute;
bottom: 0;

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

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

Ответ 7

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

Ответ 8

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

  • Создайте нижний колонтитул с 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>

Ответ 9

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

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

Ответ 11

Я добавлю к @Jimmy: вам также нужно объявить абсолютное (или относительное) позиционирование элемента, содержащего нижний колонтитул. В вашем случае это элемент тела.

Изменить: я тестировал его на вашей странице с помощью firebug и, похоже, работал очень хорошо...

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

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

Ответ 15

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

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

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

Ответ 16

Поскольку решение 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>

Ответ 17

Вот сайт с плавающим липким нижним колонтитулом, который технически впечатляет (нравится ли вам ТОЧНАЯ эстетика или нет):

http://alltop.com/

(перейдите в категорию, например Science, чтобы увидеть плавающий нижний колонтитул в IE)

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

Мало занимаются художниками, великие художники воруют.
— Работа в Steve
(цитируя Пабло Пикассо)

Ответ 18

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

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

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

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

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

Ответ 19

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>

Ответ 20

Старый поток, который я знаю, но если вы ищете отзывчивое решение, это дополнение 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/

Ответ 21

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

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

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

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

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

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

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

Edit Решение 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/library.

Ответ 22

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

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

Ответ 23

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

Ответ 24

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

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

Ответ 25

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

    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/

Ответ 26

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>

Ответ 27

Хитрость заключается в том, чтобы исправить положение нижнего колонтитула, задав для нижнего значение 0. Самое простое решение:

  footer {
        ...
        width: 100%;
        position: fixed;
        bottom: 0;
    }

Смотрите здесь этот простой пример: 

        body {
            background-color: #ccc;
            margin: 0;
        }

        main {
            width: 85%;
            margin: auto;
            background-color: bisque;
        }

        main h1 {
            text-align: center;
        }

        article p {
            padding: 5px 50px 5px 50px;
        }

        footer {
            background-color: black;
            width: 100%;
            height: 50px;
            text-align: center;
            position: fixed;
            bottom: 0;
        }

        footer p {
            color: white;
            font-size: 20px;
        }
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <main>
        <section>
            <article>
                <header>
                    <h1>Know me better!</h1>
                </header>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit quis et minima similique accusamus
                    est error eos culpa quos natus maxime, dolorem quam voluptatibus quo quod velit neque iste non.
                    Consequatur provident pariatur, similique aut velit libero quasi, laudantium magnam, eos laborum
                    expedita quos voluptas impedit labore veniam. Neque maiores aperiam soluta quis nobis ipsum hic
                    tempore porro optio ad.
                </p>
            </article>
        </section>
    </main>
    <footer>
        <p>Copyrighting 2019.</p>
    </footer>
</body>

</html>