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

css html footer sticky-footer

151133 просмотра

25 ответа

303921 Репутация автора

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

Обновить:

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

Автор: Bill the Lizard Источник Размещён: 03.09.2008 06:51

Ответы (25)


193 плюса

17885 Репутация автора

Решение

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

  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 */
}
Автор: Staale Размещён: 03.09.2008 06:55

1 плюс

65555 Репутация автора

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

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

Автор: John Sheehan Размещён: 03.09.2008 06:55

1 плюс

10835 Репутация автора

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

Автор: Grey Panther Размещён: 03.09.2008 06:55

11 плюса

7735 Репутация автора

Установите CSS для #footer:

position: absolute;
bottom: 0;

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

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

Автор: Raleigh Buckner Размещён: 03.09.2008 07:01

30 плюса

69391 Репутация автора

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

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}
Автор: Jimmy Размещён: 03.09.2008 07:02

1 плюс

1337 Репутация автора

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

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

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

Автор: obecalp Размещён: 28.02.2011 04:35

15 плюса

1840 Репутация автора

Вот решение с 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 )
Автор: Sophivorus Размещён: 18.02.2012 11:36

2 плюса

20603 Репутация автора

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

Автор: Paul Sweatte Размещён: 26.08.2012 12:47

74 плюса

86357 Репутация автора

Используйте 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>

Автор: Danield Размещён: 28.09.2014 10:02

1 плюс

116 Репутация автора

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% от высоты области просмотра.

Автор: Ajith Размещён: 21.12.2014 06:23

0 плюса

102 Репутация автора

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

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

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

Автор: Kyle Zimmer Размещён: 21.07.2015 12:55

47 плюса

3253 Репутация автора

Липкий нижний колонтитул с 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; }
Автор: gcedo Размещён: 08.12.2015 01:23

0 плюса

7635 Репутация автора

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>

Автор: DevWL Размещён: 16.01.2016 03:14

1 плюс

337 Репутация автора

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

Автор: jjr2000 Размещён: 10.02.2016 09:04

0 плюса

20 Репутация автора

Я знаю старый поток, но если вы ищете адаптивное решение, это дополнение jQuery поможет:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

Полное руководство можно найти здесь: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Автор: user1235285 Размещён: 29.08.2016 06:08

0 плюса

1619 Репутация автора

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

Автор: Ravinder Payal Размещён: 12.09.2016 11:43

0 плюса

118 Репутация автора

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

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
Автор: Laughing Horse Размещён: 21.06.2017 05:09

0 плюса

6460 Репутация автора

Решение 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;
}
Автор: Reggie Pinkham Размещён: 27.06.2017 02:18

1 плюс

116 Репутация автора

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

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

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

Автор: Daniel Alsaker Размещён: 10.07.2017 09:16

0 плюса

1372 Репутация автора

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

#my_footer {
    position: static
    fixed; bottom: 0
}
Автор: juan Isaza Размещён: 25.11.2017 06:34

4 плюса

100665 Репутация автора

Решение, похожее на @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>

Автор: Temani Afif Размещён: 04.12.2017 07:47

0 плюса

313 Репутация автора

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

    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/

Автор: Roger Размещён: 30.08.2018 11:46

1 плюс

9180 Репутация автора

Так как решение 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>

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

Автор: VXp Размещён: 21.09.2018 09:27

0 плюса

863 Репутация автора

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }
  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>

Автор: antelove Размещён: 25.12.2018 03:17

0 плюса

1597 Репутация автора

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

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

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

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

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

        main h1 {
            text-align: center;
        }

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

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

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

<head>
</head>

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

</html>

Автор: DINA TAKLIT Размещён: 28.08.2019 01:28
Вопросы из категории :
32x32