CODEWITHSUNDEEP
htmlcssflexbox
realph
realph

Reputation: 4671

Stick Element to Bottom of Fixed Element

I've got a fixed header element that I would like to stay fixed on scroll. The scrollable area, however, I would like it to be positioned directed after the fixed element, but I don't want to use position: absolute and remove it from the document flow.

I've created a Codepen here to illustrate the problem I'm having. I would like the red element (.top) to stick on scroll, without hiding the first list item.

Is there a way to go about doing this in CSS (possibly using flexbox) that doesn't require any JS?

Any help is appreciated.

Thanks in advance!

Upvotes: 3

Views: 911

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371889

If my understanding of your question is correct, you want to make no changes except for the scrollable content to not be hidden behind the fixed header.

The fixed header seems to have a natural height of nearly 20px.

So you can apply a top margin to the scrollable content which pushes it down from the top, until it clears the header.

Try adding this to your CSS:

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

This will push the div containing all the list items 20px from the top.

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

UPDATE

The answer above works when the height of the fixed header is known. But based on feedback in the comments, the height of the header varies. So a solution is needed that keeps the scrollable content beneath the header regardless of the height of the header.

This issue has been addressed in these posts:

Upvotes: 1

Related Questions