Сделать позицию дочернего элемента: липкой - PullRequest
Новая
       63

Сделать позицию дочернего элемента: липкой

0 голосов
/ 09 июля 2020

Я спрашиваю, можно ли иметь липкий элемент с высотой c элемента Dynami. И что липкий элемент ориентируется на высоту родителей? И иметь только одну полосу прокрутки и это только в CSS. Для того, что я читал, липкость обычно требует определенной высоты и не может обрабатывать динамические c высоты.

Но, возможно, кто-то знает трюк, как добиться того, что я ищу. 

.wrapper {
  max-height: 40vh;
  overflow: auto;
  border: solid 1px black;
}
.innerWrapper {
  overflow: auto;
  display: flex;
  border-top: solid 1px black;
}
.sticky{
  flex-basis: 50%;
  position: sticky;
  top: 0;
}
<div class="wrapper">
  <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 09 июля 2020

убрать переполнение и отрегулировать выравнивание: 

.wrapper {
  max-height: 40vh;
  overflow: auto;
  border: solid 1px black;
}
.innerWrapper {
  /*overflow: auto;*/
  display: flex;
  border-top: solid 1px black;
  align-items:flex-start;
}
.sticky{
  flex-basis: 50%;
  position: sticky;
  top: 0;
}
<div class="wrapper">
  <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
</div>

Связанный вопрос по проблеме переполнения: Почему 'position: sticky' не работает с Core UI Bootstrap CSS

Для выравнивания вы должны отметить, что по умолчанию его растяжение, поэтому липкий элемент уже имеет полную высоту

Подробнее: Почему bottom: 0 не работает с position: sticky?

...