Фиксированная позиция в кнопке в прокручиваемом виде / компоненте - PullRequest
Новая
       338

Фиксированная позиция в кнопке в прокручиваемом виде / компоненте

0 голосов
/ 28 марта 2019

У меня есть выноска (офисный пользовательский интерфейс) с данными. Когда данных слишком много, область выноски прокручивается. Однако я хочу, чтобы кнопка в нижнем колонтитуле / под этими данными в том же компоненте выноски всегда была видна. Я попытался добавить «положение: абсолютное / фиксированное» для кнопки. Он остается на месте, но данные в прокручиваемых частях «нажимают» кнопку вниз, даже если ее не видно. Смотрите изображение.

enter image description here

Вы можете видеть, что кнопка «Готово» имеет абсолютное / фиксированное положение. Он всегда виден, но выводится по тегам, даже если его можно прокручивать. Я хочу, чтобы он был как нижний колонтитул в прокручиваемом виде и всегда отображался там, а не под полем. Смотрите вторую картинку для поведения, которого я хочу достичь.

enter image description here

Попытался воссоздать проблему в моей песочнице с моим кодом. Не совсем то же самое, но похожее: https://codesandbox.io/s/6v7m7mk8vz?fontsize=14

1 Ответ

1 голос
/ 28 марта 2019 

* {
  box-sizing: border-box;
}

section {
  height: 6em;
  width: 10em;
  position: relative;
  border: 1px solid;
}

div {
  height: 100%;
  overflow: auto;
  padding-bottom: 2em;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 17px;
  line-height: 2em;
  background: white;
  text-align: center;
}
<section>
  <div>
    <ul><li>0<li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9</ul>
    <footer><button>Footered button</button></footer>
  </div>
</section>
...