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

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>

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

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

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

... and here's how the same code works with lots of content in the content 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, вы можете обойти это, используя отрицательные поля и отступы с изменением размера поля -

Like so:

* {
    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 display с использованием свойства 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;
}

Или измените стиль flex для элемента spacer на:

.spacer {
  flex: 1 0 auto;
}

Этот трехзначный сокращенный стиль эквивалентен следующей полной настройке:

.spacer {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

Элегантно работает везде.

Вы можете использовать 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).

Решение, аналогичное @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 внутри друг друга было беспорядочным решением. Я просто немного повозился с этим, и я лично обнаружил, что это работает, и это, безусловно, один из самых простых способов:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

Что мне нравится в этом, так это то, что не нужно применять дополнительный HTML. Вы можете просто добавить этот CSS, а затем написать свой 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

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

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

Используйте абсолютное позиционирование и 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: grxqeen; }
      /* 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>

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

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

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

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

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

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

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 переопределила отображение тела по умолчанию, и это смущало меня очень долго.

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

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

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

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

Решение 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;
}

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

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

CUSTOM PLUGIN CROSS BROWSER 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>

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

    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/

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

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; в нижнем колонтитуле. Затем я убедился, что нижний колонтитул был последним элементом тела.

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

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

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

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

Ниже его CSS-Tricks flexbox Sticky Footer. - просто посмотрите на код ниже, проще не бывает.

(В приведенном ниже примере 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-уловки - полное руководство по Flexbox

Взгляните на 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;
}
    

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

.page-body {min-height: calc(100vh - 400px);} /*Replace 400px with your footer height*/

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

position: fixed;

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

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

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