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

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

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>

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

Вот так:

* {
    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отображении , используя 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 .

Причуды Сафари

Имейте в видуflex-shrink , что Safari имеет некорректную реализацию свойства , которая позволяет элементам сжиматься больше минимальной высоты, необходимой для отображения содержимого. Чтобы устранить эту проблему, вам нужно будет flex-shrinkявно установить для свойства значение 0 для параметра .contentand 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;

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

Вложенная многостолбцовая схема 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;
}

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

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

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

    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 (с переполнением: авто) вокруг содержимого и боковой панели.

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