# Make everything static, except one container scrollable!?

**URL:** <https://community.weweb.io/t/make-everything-static-except-one-container-scrollable/7215>\
**Category:** How do I?\
**Tags:** design\
**Created:** [February 23, 2024, 4:59pm UTC](https://community.weweb.io/t/make-everything-static-except-one-container-scrollable/7215 "2024-02-23T16:59:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![unlustucru](https://avatars.discourse-cdn.com/v4/letter/u/e36b37/32.png) [@unlustucru](https://community.weweb.io/u/unlustucru)\
**Post date:** [February 23, 2024, 4:59pm UTC](https://community.weweb.io/t/make-everything-static-except-one-container-scrollable/7215/1 "2024-02-23T16:59:38Z")

</div>

My page consists of a main container (“section”), containing 3 subcontainers (“left”, “center”, and “right”).

I want the “center” and “right” container to stay static (not scrollable). These containers automatically fill the available height.

I’d like to set up scroll on the one container that overflows the visible height, “left”. Actually, it would more precisely the “unit” container that would scroll. Ideally the “course\_card” element wouldn’t move.

 ![Screenshot 2024-02-23 at 17.50.01](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/a994b67d75b442e5c505817cd31d6edf5df4583d.png)

In comparison with the previous picture, this is the desired result:

 ![Screenshot 2024-02-23 at 17.51.18](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8e26e87ff5cc37935c910ff5cbc555940e092875.png)

I’ve tried 100 things to achieve this, without success…

I’m not familiar with the underlying logic that would allow me to do this. Can anyone help?

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [February 25, 2024, 10:24am UTC](https://community.weweb.io/t/make-everything-static-except-one-container-scrollable/7215/2 "2024-02-25T10:24:12Z")

</div>

Hey @unlustucru !

- Section need to have a fixed width. You can set the height to fill the screen by binding its height property to calc(100vh - 100px) — 100px being the height of your header\_container.
- Set the height of the subcontainers to 100%. Your page should not be able to scroll now.
- Set the overflow of your left subcontainer to _auto_. If the unit div is long enough, you should be able to scroll the left div (a scrollbar appear for that div)
- You can set the position of the course\_card to _sticky_ and adjusting the top value. This way this div will stick to the top of the left div.

I hope this was clear enough. If not, I can make a quick video out of it 🙂

---

<div class="post-metadata">

**Author:** ![unlustucru](https://avatars.discourse-cdn.com/v4/letter/u/e36b37/32.png) [@unlustucru](https://community.weweb.io/u/unlustucru)\
**Post date:** [February 25, 2024, 8:30pm UTC](https://community.weweb.io/t/make-everything-static-except-one-container-scrollable/7215/3 "2024-02-25T20:30:17Z")

</div>

Amazing thanks a lot!