在 Android 移动 Firefox 上滚动时将元素定位在可见空间的底部 [英] Position an element at bottom of the visible space while scrolling on Android mobile Firefox
问题描述
我想在页面底部放一个页脚，数据量比较大，但是页脚应该在最顶层的内容之上:
<元名称=视口"内容=宽度=设备宽度，初始缩放=1，用户缩放=是"><style type="text/css">身体{高度:2000px；位置:绝对；宽度:100%；高度:100%；}.主要的{高度:800px；宽度:20%；溢出:滚动；背景颜色:红色；}.底部{位置:固定；底部:0px；背景颜色:绿色；}</风格><身体><div class="main">主要内容<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3br>1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
br>2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
1
br>3
1
2
3
1
2
3
1
2
3<div class="bottom">bottom</div></body></html>
现在我的问题是，如果我滚动页面，底部会保持在它生成的位置.
我尝试了 position:fixed，这在桌面版 Firefox 上很好，但在移动版 Firefox 上不行:https://spacetrace.org/test.html
如果用两根手指调整屏幕大小，底部会发生位移.
如何在 Firefox 移动版上仅使用 CSS 将其保持在底部?
试试这个代码，我没有使用 javascript，我认为使用这个 css 代码可以正常工作:
<元名称=视口"内容=宽度=设备宽度，初始缩放=1，用户缩放=是"><style type="text/css">身体{位置:相对；宽度:100%；高度:2000px；}.主要的{位置:绝对；顶部:0;左:0;最小高度:100%；高度:800px；宽度:20%；溢出:滚动；背景颜色:红色；}.底部{z-索引:1；位置:固定；底部:0;背景颜色:绿色；}</风格><身体><div class="main">主要内容<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3<br>1<br>2<br>3br>1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
br>2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
1
br>3
1
2
3
1
2
3
1
2
3<div class="bottom">bottom</div></body></html>
Codepen https://codepen.io/ahamdan/pen/VwjeJWw
I want to put a footer at the bottom of the page, which has quite large amount of data, but the footer should be over the content at the top layer:
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<style type="text/css">
body{
height:2000px;
position: absolute;
width:100%;
height:100%;
}
.main{
height: 800px;
width:20%;
overflow: scroll;
background-color:red;
}
.bottom{
position: fixed;
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>
</body></html>
Now my problem is, that if I scroll the page, the bottom keeps on its position where it was generated.
I tried position:fixed, which is fine on desktop Firefox, but not on mobile Firefox: https://spacetrace.org/test.html
If you resize the screen with two fingers, you get the bottom displaced.
How do I keep it at the bottom with only CSS on Firefox mobile too?
Try this code i didnt use javascript and i think it will work fine using this css code:
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<style type="text/css">
body{
position: relative;
width:100%;
height:2000px;
}
.main{
position:absolute;
top:0;
left:0;
min-height:100%;
height: 800px;
width:20%;
overflow: scroll;
background-color:red;
}
.bottom{
z-index:1;
position: fixed;
bottom:0;
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>
</body></html>
Codepen https://codepen.io/ahamdan/pen/VwjeJWw
这篇关于在 Android 移动 Firefox 上滚动时将元素定位在可见空间的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
