Question

因此，我在视口底部有一个带有position: fixed按钮的列表。由于此按钮是position: fixed列表的最后一个元素，倒数第二个元素的一部分显示在该按钮下方，因此用户无法正确看到它们。

到目前为止我尝试过的事情：

使用按钮的高度向容器添加padding-bottom。这种方法的问题：在不同的语言中，按钮的高度不同，因此仅在几种情况下有效。
按下按钮position: sticky而不是固定按钮。这种方法的问题：列表位于overflow-y: scroll容器中，因此该方法在iOS中不起作用。同样，仅在两种情况下有效。
在列表后添加div并使用javascript控制其高度。这种方法的问题：可以完成工作，但是不是很优雅。

除了我的第三个方法以外，还有谁知道更好的方法吗？刚开始时，我以为可能必须使用JS，但是position: sticky让我希望只有CSS才有可能。

Answer 1

由于列表是固定的，因此这是我对屏幕底部的按钮所做的示例。 如果您举一个例子说明问题会很好，但是很难说出来。

很明显，如果需要，您必须编辑文本的位置，但是原则是重要的，并且一切都是响应性的。无论屏幕大小如何，每个<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>

动态占位符高度

1 个答案: