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

StackOverflow https://stackoverflow.com/questions/42294

Вопрос

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

Обновить:

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

Это было полезно?

Решение

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

  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 units!

Вероятно, самый очевидный и нехакерный способ создать липкий нижний колонтитул - это использовать новый единицы отображения css.

Возьмем, к примеру, следующую простую разметку:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

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

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

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

...и вот как один и тот же код работает с большим количеством содержимого в content div:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

Примечание:

1) Высота верхнего и нижнего колонтитулов должна быть известна

2) Старые версии IE (IE8-) и Android (4.4-) не поддерживают единицы отображения.(каниуз)

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
  • Сафари ≥ 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;

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

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

Аналогичное решение для @gcedo но без необходимости добавления промежуточного содержимого для того, чтобы опустить нижний колонтитул вниз.Мы можем просто добавить margin-top:auto к нижнему колонтитулу, и он будет перемещен в нижнюю часть страницы независимо от его высоты или высоты содержимого выше.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}
<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

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

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

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

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

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

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

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

CSS :

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

HTML:

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

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

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

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

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

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

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

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

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

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

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"));

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

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

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

Другим решением являются медиа-запросы CSS, но вам придется вручную писать разные стили 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 - $.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"}

нет необходимости размещать его внутри события document ready.Он и так будет работать хорошо.Он пересчитает положение вашего нижнего колонтитула при загрузке страницы и изменении размера окна.

Вот код плагина, который вам не обязательно понимать.Просто знайте, как это реализовать.Это сделает всю работу за вас.Однако, если вы хотите знать, как это работает, просто просмотрите код.Я оставил для вас комментарии.

//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 layout привело к изменению некоторых макетов наших страниц, и не в лучшую сторону.То, что в конце концов сработало для меня, было:

    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/

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

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

      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>

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top