javascript - 动态占位符高度

问题描述

position: fixed所以我在视口底部有一个带有按钮的列表。因为这个按钮是position: fixed列表的最后一个元素，而倒数第二个元素的一部分出现在按钮下方，所以用户无法正常看到它们。

到目前为止我尝试了什么：

padding-bottom使用按钮的高度将 a 添加到容器中。这种方法的问题：在不同的语言中，按钮的高度是不同的，所以它只在几个场景中是好的。
制作按钮position: sticky而不是固定。这种方法的问题：列表在一个overflow-y: scroll容器中，所以这种方法在 iOS 中不起作用。同样，仅在几种情况下有效。
在列表后添加一个 div 并使用 javascript 控制其高度。这种方法的问题：可以完成工作，但它不是很优雅。

除了我的第三个方法之外，有人知道更好的方法吗？当我开始使用这个时，我认为我可能必须使用 JS 来实现它，但position: sticky给了我希望只有 CSS 才有可能。

标签： javascripthtmlcss

由于您的列表是固定的，因此这是我为屏幕底部的按钮所做的示例。虽然如果你展示一个你的问题的例子会很好，因为这很难说。

显然，如果需要，您必须编辑文本的位置，但原则才是最重要的，一切都是响应式的。<li>无论屏幕大小，每个单独的元素都是 10% 高和 20% 宽。

CSS：

<style>
  ul { position: fixed; width: 100%; height: 10%; bottom: 0%; left: 0%; background-color: deepskyblue; list-style-type: none; margin: 0; }
  li { position: absolute; }
  .a { width: 20%; height: 100%; background-color: red; left: 0%; }
  .b { width: 20%; height: 100%; background-color: orange; left: 20%; }
  .c { width: 20%; height: 100%; background-color: yellow; left: 40%; }
</style>

HTML：

<ul>
  <li class="a">AAA</li>
  <li class="b">BBB</li>
  <li class="c">CCC</li>
</ul>

javascript - 动态占位符高度

问题描述

解决方案

推荐阅读