滚动时将元素放置在可见空间的底部[重复]
Posted
技术标签:
【中文标题】滚动时将元素放置在可见空间的底部[重复]【英文标题】：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 将其保持在底部？
【问题讨论】：
那个答案不能解决问题：***.com/questions/643879/… 这不是一个答案，而是一个有 29 个答案的问题（除了另外两个具有更多答案的重复项）。值得注意的是，您在下面接受的答案在重复中 我现在接受了这个答案并提出了一个新问题，这只是关于 android Firefox，这是我的主要问题。 请删除这个问题，我在这里问了一个更清晰的新问题：***.com/questions/64235179/… 所以你必须等待 2 天或者干脆什么都不做......有重复的问题没有错 【参考方案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>【讨论】：
这确实在浏览器中解决了它，但在安卓手机上却没有。我在我的问题中添加了一个示例。 请删除你的答案，我可以删除这个问题以上是关于滚动时将元素放置在可见空间的底部[重复]的主要内容，如果未能解决你的问题，请参考以下文章