search

tailwindlabs / discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
MIT License
171 stars 9 forks source link

How do I get a sidebar to extend the background color even when the page scrolls #403

Open davidahouse opened 4 years ago

davidahouse commented 4 years ago

I have a sidebar using this styling on the div:

div(class="bg-gray-800 shadow-lg h-16 fixed bottom-0 md:relative md:h-screen z-10 w-full md:w-48")

Which looks like this:

Screen Shot 2019-12-16 at 8 24 20 AM

Everything is good until the page has to scroll and then the background also seems to scroll as well.

Screen Shot 2019-12-16 at 8 24 24 AM

I'm not really sure how to fix this. I get that the initial height of the div is h-screen. But why does only the background seem to scroll, but the contents don't? Any clues as to what I've setup wrong or why that is happening?

If it helps a few more details:

My body tag: body(class="bg-gray-100 leading-normal tracking-normal mt-16")

The main content area that is below the top navbar: div(class="flex flex-col md:flex-row")