Стильный элемент в нижней части фиксированного элемента

Question

У меня есть фиксированный элемент заголовка, который я бы хотел зафиксировать на прокрутке. Однако прокручиваемую область я бы хотел, чтобы она позиционировалась после фиксированного элемента, но я не хочу использовать position: absolute и удалять ее из потока документов.

Я создал Codepen here, чтобы проиллюстрировать проблему, которую я испытываю. Я хотел бы, чтобы красный элемент (.top) наклеился на свиток, не скрывая первый элемент списка.

Есть ли способ сделать это в CSS (возможно, используя flexbox), который не требует каких-либо JS?

Любая помощь приветствуется.

Заранее благодарен!

Answer 1

Если мое понимание вашего вопроса верное, вы не хотите вносить изменения кроме для прокручиваемого содержимого, которое не должно быть скрыто за фиксированным заголовком.

Исправленный заголовок, кажется, имеет естественную высоту почти 20 пикселей.

Таким образом, вы можете применить верхний край к прокручиваемому контенту, который толкает его сверху, пока он не очистит заголовок.

Попробуйте добавить это в ваш CSS:

div.list { margin-top: 20px;} 

Это будет толкать div, содержащий все элементы списка 20px от вершины.

DEMO: http://codepen.io/anon/pen/EVWYJd

---

UPDATE

Ответ выше работ, когда высота фиксированного заголовка известна. Но исходя из отзывов в комментариях, высота заголовка меняется. Поэтому требуется решение, которое сохраняет прокручиваемое содержимое под заголовком независимо от высоты заголовка.

Эта проблема была решена в этих постах:

• How do I use CSS to position a fixed variable height header and a scrollable content box?
• Creating a variable height "fixed" header in CSS with scrollable content