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

css html footer sticky-footer

151133 просмотра

25 ответа

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

Обновить:

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

Автор: Bill the Lizard Источник Размещён: 28.08.2019 04:28

Ответы (25)


193 плюса

Решение

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

  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

74 плюса

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

47 плюса

Липкий нижний колонтитул с 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

30 плюса

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

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

15 плюса

Вот решение с 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

11 плюса

Установите 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

4 плюса

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

2 плюса

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

1 плюс

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

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

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

1 плюс

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

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

1 плюс

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

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

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

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

1 плюс

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

Это должно сработать, если вы ищете отзывчивый нижний колонтитул, выровненный внизу страницы, который всегда сохраняет верхнее поле в 80% от высоты области просмотра.

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

1 плюс

На этот вопрос многие из ответов, которые я видел, являются неуклюжими, сложными для реализации и неэффективными, поэтому я подумал, что мне нужно сделать попытку и найти свое собственное решение, которое представляет собой чуть-чуть CSS и HTML

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}
<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

это работает, устанавливая высоту нижнего колонтитула и затем используя css calc для определения минимальной высоты страницы, когда нижний колонтитул все еще находится внизу, надеюсь, это поможет некоторым людям :)

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

1 плюс

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

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

1 плюс

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

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

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

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

0 плюса

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

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

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

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

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

0 плюса

Я создал очень простую библиотеку https://github.com/ravinderpayal/FooterJS

Это очень просто в использовании. После включения библиотеки просто вызовите эту строку кода.

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

Нижние колонтитулы можно динамически изменять, вызывая указанную выше функцию с другим параметром / идентификатором.

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

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

Другое решение - CSS Media 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 плюса

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

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 плюса

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

0 плюса

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

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

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>

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

0 плюса

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

    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

0 плюса

      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 плюса

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