html 防止固定元素在移动的浏览器UI收缩或展开时移动

5ssjco0h 于 5个月前发布在其他

关注(0)|答案(1)|浏览(55)

我正面临着一个在移动的网页中使用固定元素的挑战，我需要它保持静态，而不管移动的浏览器的UI大小如何变化。

问题：

元素的样式为position: fixed和height: 100lvh。
在移动的上，当浏览器UI（如地址栏）隐藏或显示时，此元素会向上移动其位置，这是我想避免的。
即使移动的浏览器UI收缩或展开，固定元素也应该保持不动。
下面是我想要的行为的图像：

在图像中，注意固定元素如何随着UI的变化而调整其位置。如何在UI变化期间保持此元素静止？
任何见解或解决方案将不胜感激。
谢谢你，谢谢

Html

来源：https://stackoverflow.com/questions/77712053/preventing-a-fixed-element-from-moving-when-mobile-browser-ui-retracts-or-expand

1条答案

按热度按时间

uqdfh47h1#

如果元素的样式是位置固定的，只需要设置bottom而不是top，并使用px而不是vh的Exact number，当顶部距离改变时，它总是将位置固定到底部，我在下面添加了一个演示，你可以测试它

<table>
  <tbody>
    <tr>
      <td id="cell1">
        Cell 1
      </td>
      <td id="cell2">
        Cell 2
      </td>
      <td id="cell31">
        Cell 3
      </td>
      <td id="cell4">
        Cell 4
      </td>
    </tr>
    <tr>
      <td id="cell5">
        Cell 5
      </td>
      <td id="cell6">
        Cell 6
      </td>
      <td id="cell7">
        Cell 7
      </td>
  </tbody>
</table>
<script>
  document.querySelector('table').style.bottom = document.documentElement.clientHeight + 'px'
</script>

字符串

赞(0）回复(0）举报 5个月前

我来回答

html 防止固定元素在移动的浏览器UI收缩或展开时移动

1条答案

相关问题

热门标签

最新问答