Ответственный застрявший div на входе в сайт

Question

Я не могу найти точный ответ, который я ищу в Интернете, но проблема в том, что я даже не уверен, что искать.

Когда вы входите на главную страницу, я хочу, чтобы div был прикреплен к нижней части (для любого устройства) и при прокрутке. Но я не хочу, чтобы он исправлялся так, чтобы он прокручивался с экрана.

Я уверен, что это какой-то отзывчивый трюк, который я пропускаю, но мне бы хотелось получить обратную связь. Заранее благодарю!

EDIT: Я не хочу, чтобы div следовал за вами при прокрутке. Но я хочу, чтобы он отображался в самом низу экрана при первом просмотре сайта (независимо от платформы, которую вы используете для просмотра сайта.)

Пример этого сайта. Стрелка вниз отображается в одном и том же месте для всех устройств, но не прокручивается с пользователем: https://www.nabitablet.com/

Answer 1

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

body { 
 
    height: 5000px; 
 
} 
 

 
.container { 
 
    bottom: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.item { 
 
    background-color: #f00; 
 
    bottom: 0; 
 
    height: 50px; 
 
    position: absolute; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
</div>