Липкий нижний колонтитул в scroll-y-container в зависимости от высоты содержимого

Question

У нас есть контейнер с overflow-y:scroll, который должен иметь нижний колонтитул, который является липким (нижний 0), если содержимое внутри прокручиваемого контейнера + высота (которая является динамической) нижнего колонтитула не превышает высоту контейнеров.

HTML:

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    Lorem ipsum dolor sit amet
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>

.content и .footer могут содержать больше или меньше контента.

Если возможно, мы не хотим использовать JS для этого.

Я создал скрипку с несколькими состояниями: http://jsfiddle.net/bqvtf1zo/1/

Удаление position: absolute в .footer решает ее для случая "мало контента" (см. Скрипту), но разбивает другие 2 случая.

Answer 1

Вам необходимо создать контейнер flex. (Хотя есть и другие способы решения этой проблемы: https://css -tricks.com / couple-takes-sticky-footer / )

Для контейнера установите display в flex и flex-direction в column и задайте для прокручиваемого содержимого значение flex 1.Удалите позиционирование из нижнего колонтитула, и вот оно у вас.

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

Для реализации: Обязательно следите за всеми кросс-браузерными проблемами с flexbox, такими как префиксы и ошибки.https://github.com/philipwalton/flexbugs

.wrapper{
  position: relative;
  height: 205px;
  width: 200px;
}
.scroll{
  border: 1px solid red;
  overflow-y: scroll;
  height: 100%;
  width: 100%;
   display:flex;
  flex-direction: column;
}
.content{
  background-color: #ccc;
  flex:1;

}
.footer{
  background-color: #efefef;

}

<h1>
 little content
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    Lorem ipsum dolor sit amet
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>


<h1>
 large content
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    1. Lorem ipsum dolor sit<br>
    2. Lorem ipsum dolor sit<br>
    3. Lorem ipsum dolor sit<br>
    4. Lorem ipsum dolor sit<br>
    5. Lorem ipsum dolor sit<br>
    6. Lorem ipsum dolor sit<br>
    7. Lorem ipsum dolor sit<br>
    8. Lorem ipsum dolor sit<br>
    9. Lorem ipsum dolor sit<br>
    10. Lorem ipsum dolor sit<br>
    11. Lorem ipsum dolor sit<br>
    12. Lorem ipsum dolor sit<br>
    13. Lorem ipsum dolor sit<br>
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>

<h1>
 large content with large footer
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    1. Lorem ipsum dolor sit<br>
    2. Lorem ipsum dolor sit<br>
    3. Lorem ipsum dolor sit<br>
    4. Lorem ipsum dolor sit<br>
    5. Lorem ipsum dolor sit<br>
    6. Lorem ipsum dolor sit<br>
    7. Lorem ipsum dolor sit<br>
    8. Lorem ipsum dolor sit<br>
    9. Lorem ipsum dolor sit<br>
    10. Lorem ipsum dolor sit<br>
    11. Lorem ipsum dolor sit<br>
    12. Lorem ipsum dolor sit<br>
    13. Lorem ipsum dolor sit<br>
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go further down<br>
    Some additional content
    </div>
  </div>
</div>