滚动时将元素放置在可见空间的底部[重复]答案

【问题标题】：position an element at bottom of the visible space while scrolling [duplicate]滚动时将元素放置在可见空间的底部[重复]
【发布时间】：2021-01-21 20:51:05
【问题描述】：

我想在页面底部放一个页脚，数据量很大，但页脚应该在最顶层的内容之上：

<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">                         

  <style type="text/css">
  .main{
    height: 1430px;
    background-color:red;
  }
  .bottom{
    position: absolute;
    bottom: 0px;
    background-color:green;
  }
  </style>
</head>
<body>
  <div class="main">main content
    <br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3
  </div>
<div class="bottom">bottom</div>

现在我的问题是，如果我滚动页面，底部会保持在它生成的位置。

如何仅使用 CSS 将其保持在底部？

【问题讨论】：

那个答案不能解决问题：stackoverflow.com/questions/643879/…
这不是一个答案，而是一个有 29 个答案的问题（除了另外两个具有更多答案的重复项）。值得注意的是，您在下面接受的答案在重复中
我现在接受了这个答案并提出了一个新问题，这只是关于 android Firefox，这是我的主要问题。
请删除这个问题，我在这里问了一个更清晰的新问题：stackoverflow.com/questions/64235179/…
所以你必须等待 2 天或者干脆什么都不做......有重复的问题没有错

标签： html css

【解决方案1】：

只需将position: fixed 与您的bottom: 0 结合使用：

.main {
  height: 1430px;
  background-color: red;
}

.bottom {
  position: fixed;
  bottom: 0px;
  background-color: green;
}

<div class="main">main content <br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3</div>

<div class="bottom">bottom</div>

【讨论】：

这确实在浏览器中解决了它，但在安卓手机上却没有。我在我的问题中添加了一个示例。
请删除你的答案，我可以删除这个问题