У мене простий макет у двох стовпцях із колонтитулом, який очищає і правий, і лівий розділ у моїй розмітці. Моя проблема полягає в тому, що я не можу заставити колонтитул залишитися внизу сторінки у всіх браузерах. Він працює, якщо вміст штовхає колонтитул вниз, але це не завжди так.

Щоб отримати липкий колонтитул:

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>

... і ось, як працює той самий код із великою кількістю вмісту у розділі вмісту:

* {
    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>

Примітка:

1) Висота заголовка і колонтитула повинна бути відома

2) Старі версії IE (IE8-) та Android (4.4-) не підтримують оглядові одиниці. ( канюза )

3) Колись у webkit виникли проблеми з оглядами одиниць у праві вибору. Це дійсно було виправлено ( див. Тут ), тому проблем там немає. Однак якщо ви хочете, щоб уникнути використання 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

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

Пояснення

Це рішення дійсне лише для :

• Chrome ≥ 21,0
• Firefox ≥ 20,0
• Internet Explorer ≥ 10
• Сафарі ≥ 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;

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

Крім того, якщо я правильно пам’ятаю, у IE6 є проблема з bottom: 0CSS. Можливо, вам доведеться використовувати рішення 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>

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/

Я часом боровся з цим, і я завжди вважав, що рішення з усіма цими дівами всередині один одного було безладним рішенням. Я трохи поспішив з цим, і я особисто з’ясував, що це працює, і це, безумовно, один із найпростіших способів:

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% від висоти вікна перегляду.

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

• Створіть поділ нижнього колонтитулу з 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>

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

Одним з рішень було б встановити мінімальну висоту для коробок. На жаль, здається, що він не дуже підтримується IE (здивування).

Жодне з цих чистих css-рішень не працює належним чином із динамічним зміною вмісту (принаймні, на firefox та Safari), наприклад, якщо у вас є набір фонових даних на контейнері div, на сторінці, а потім зміни розміру (додавання декількох рядків) всередині div, таблиця може стирчати внизу стилізованої області, тобто у вас може бути половина таблиці білого кольору на чорній темі, а половина таблиці - біла, оскільки колір шрифту та колір тла - білий. Це в основному не можна виправити на сторінках тематичних роликів.

Вкладений макет у багато стовпців Div - це некрасивий злом, а поділ на тіло / контейнер з висотою 10% для наклеювання нижнього колонтитулу - більш жорстокий злом.

Єдине рішення без сценарію, яке працює у всіх браузерах, які я спробував: набагато простіша / коротша таблиця з 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;
}

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

Тема мого 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"));

Нижній колонтитул можна динамічно змінювати, викликаючи вищевказану функцію з різним параметром / id.

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

Розташування гнучкості віддається перевазі природних висот колонтитула та нижнього колонтитулу. Це флеш-рішення тестується в сучасних браузерах і насправді працює :) в 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
}

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>

Рішення 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/

Якщо ви не хочете, щоб він використовував фіксовану позицію і неприємно стежив за вами на мобільному, це, здається, працює для мене поки що.

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 (з переповненням: авто) навколо вмісту та бічної панелі.

Якщо це не працює, чи є у вас знімки екрана чи приклади посилань, де колонтитул не відображається належним чином?