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

Question

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

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

обновление:

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

23 247

html css footer sticky-footer

23 ответа:

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

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

возьмем для примера следующую простую разметку:
<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

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

объяснение

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

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>
вы можете играть с ним в 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 to:
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, таблица может торчать из нижней части стилизованной области, т. е. вы можете иметь половину таблицы в Белом на черной теме и половину таблицы в белом цвете, потому что цвет шрифта и цвет фона белый. Это в основном не фиксируется с themeroller страницы.

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

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

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, но вам нужно вручную писать разные стили 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/библиотека один.

0

мне не везло с решениями, предложенными на этой странице раньше, но потом, наконец, этот маленький трюк сработал. Я включу его в качестве другого возможного решения.
footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

0

решение Flexbox

план гибкого трубопровода предпочтен для естественных высот верхнего и нижнего колонтитула. Это решение 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 CROSS BROWSER -$.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>


<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>
align-content: space-between

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

0

Staale · Accepted Answer · 2018-04-03 17:49:42

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

есть <div> С class="wrapper" для вашего содержания.

право до закрывающим тегом </div> на wrapper место <div class="push"></div>.

право после закрывающим тегом </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 */
}

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

обновление:

23 ответа:

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

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

объяснение

реализация

сафари закидоны

решение Flexbox

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