响应卡在网站入口 div

Question

我似乎无法在网上找到我正在寻找的确切答案，但问题是我什至不确定要寻找什么。

当您进入主页时，我希望 div 固定在底部（对于任何设备）以及当您滚动时。但我不希望它固定，以便它随屏幕滚动。

我确定这是我忽略的一些响应技巧，但我希望得到一些反馈。先谢谢你了！

编辑：我不希望 div 在滚动时跟随您。但我确实希望它在您第一次查看网站时出现在屏幕的最底部（无论您使用什么平台查看网站。）

例如这个网站。向下箭头出现在所有设备的同一位置，但不随用户滚动：https://www.nabitablet.com/

Answer 1

您可以使用大小为 window 的绝对定位容器，然后将项目绝对定位到容器底部。根据您的页面结构，这可能不起作用。

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>

响应卡在网站入口 div

Responsive stuck div on website entry

html

css

responsive