Динамическая высота заполнителя

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>