在 Android 移动 Firefox 上滚动时将元素放置在可见空间的底部答案

【问题标题】：Position an element at bottom of the visible space while scrolling on Android mobile Firefox在 Android 移动 Firefox 上滚动时将元素放置在可见空间的底部
【发布时间】：2021-01-21 21:17:01
【问题描述】：

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

<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>

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

我尝试了position:fixed，这在桌面 Firefox 上很好，但在移动 Firefox 上不行：https://spacetrace.org/test.html

如果你用两根手指调整屏幕大小，底部会移位。

如何在 Firefox 移动版上也仅使用 CSS 将其保持在底部？

【问题讨论】：

嘿 rubo，你想把它贴在你的主 div 的底部还是你身体的底部？？
可见屏幕底部
它应该在任何屏幕尺寸下漂浮在它下面的任何东西上
codepen.io/ahamdan/pen/VwjeJWw 试试这个
这不起作用。在向下滚动之前，绿色底部不可见。它应该一直可见

标签： html css mobile

【解决方案1】：

body 元素将position 属性设置为absolute，这给它一个margin 或8px。这为页面提供了一个尾随空格，以及正文有一个固定的height，页脚本身试图坚持这一事实。

解决方案：从body 元素中删除所有CSS，这是不必要的，也是不好的做法。如果你的页面太短，给它一个min-height 属性100%。

【讨论】：

我试图在我的游戏spacetrace.org 中移除身体的高度，但底部的消息栏在一秒钟后一直跳到大约 2000 像素

【解决方案2】：

试试这个。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">                         
  <style type="text/css">
  body {
    margin:0px; 
  }
  .main {
    width:20%;
    overflow: auto;
    padding-bottom: 18px; /* height of the fixed div at bottom */
    background-color:red;
  }
  .bottom {
    position: fixed;
    bottom: 0px;
    width: 20%;
    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 class="bottom">bottom</div>  
  </div>  
</body>
</html>

【讨论】：

【解决方案3】：

试试这个我没有使用 javascript 的代码，我认为使用这个 css 代码可以正常工作：

    <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>

代码笔https://codepen.io/ahamdan/pen/VwjeJWw

【讨论】：