Чтобы прикрепить divк нижней части страницы, вы можете использовать различные методы CSS. Вот несколько подходов, которые вы можете рассмотреть:

1. Позиция: абсолютная
   Вы можете установить для свойства positiondivзначение absolute, а затем использовать дно: 0, чтобы разместить его внизу страницы. Убедитесь, что родительский контейнер имеет свойство position, отличное от static.

.container {
  position: relative;
}
.sticky-div {
  position: absolute;
  bottom: 0;
}

2. Flexbox
   Используя Flexbox, вы можете использовать свойство align-selfдля выравнивания divв конце контейнера.

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure the container takes up the full viewport height */
}
.sticky-div {
  align-self: flex-end;
}

3. Grid
   Если вы используете CSS Grid, вы можете использовать свойство grid-template-rows, чтобы создать сетку со строкой, занимающей оставшееся пространство. Поместите divв эту строку.

.container {
  display: grid;
  grid-template-rows: 1fr auto; /* The last row takes up the remaining space */
  min-height: 100vh; /* Ensure the container takes up the full viewport height */
}
.sticky-div {
  grid-row: 2;
}

4. Position: Sticky
   Свойство position: Stickyпозволяет элементу оставаться в обычном потоке документа до тех пор, пока не будет достигнута определенная позиция прокрутки. Примените position: Stickyи bottom: 0к div.

.sticky-div {
  position: sticky;
  bottom: 0;
}

<старый старт="5">

JavaScript
Если приведенные выше методы CSS не соответствуют вашим требованиям, вы также можете добиться этого с помощью JavaScript. Вот пример использования jQuery:

$(window).on('load resize', function() {
  var windowHeight = $(window).height();
  var contentHeight = $('.container').outerHeight();
  var divHeight = $('.sticky-div').outerHeight();
  var footerHeight = $('footer').outerHeight();
  if (windowHeight > contentHeight + footerHeight) {
    $('.sticky-div').css('position', 'fixed').css('bottom', '0');
  } else {
    $('.sticky-div').css('position', 'relative');
  }
});