# How to create a sidebar that’s sticky but also scrolls

> Learn how to build a sidebar that stays sticky yet scrolls on short screens using CSS position sticky, top 0, height 100vh, and overflow-y auto, or Tailwind.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2024-01-07 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/how-to-create-a-sidebar-thats-sticky-but-also-scrolls/

To make a sidebar fixed but also accommodate screens that are not tall enough to contain the entire sidebar, use this CSS:

```css
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh; 
  overflow-y: auto;
}
```

Using Tailwind CSS:

```html
<div class='sticky top-0 h-screen overflow-y-auto'>
...
</div>
```