# How do I make a sticky footer?

**URL:** <https://community.weweb.io/t/how-do-i-make-a-sticky-footer/3685>\
**Category:** How do I?\
**Created:** [July 27, 2023, 1:18am UTC](https://community.weweb.io/t/how-do-i-make-a-sticky-footer/3685 "2023-07-27T01:18:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [July 27, 2023, 1:18am UTC](https://community.weweb.io/t/how-do-i-make-a-sticky-footer/3685/1 "2023-07-27T01:18:29Z")

</div>

I have 2 issues related to a footer section.

1. I’m struggling to see how to make a footer sticky and pinned to the bottom of the screen. A search of “sticky” in the weweb documentation was fruitless.

2. I have a button that’s hanging outside of it’s parent container even though the button is set to 100% width. Can someone tell me how to fix this?

I made a quick loom video to describe my issues. [Loom | Free Screen & Video Recording Software | Loom](https://www.loom.com/share/556a5f22e5744a38b6c82df9e95a18df?sid=06c594bc-ede2-4db5-a8e1-645446351a65)

---

<div class="post-metadata">

**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\
**Post date:** [July 27, 2023, 2:38am UTC](https://community.weweb.io/t/how-do-i-make-a-sticky-footer/3685/2 "2023-07-27T02:38:56Z")

</div>

I’ve been waiting on a masterclass with regards to layout. As I started getting a more complex design I’ve had a hell of a time getting elements where I want them (and to contain an element within its parent element).

So I’m not the best person to ask but for what it’s worth, to get the Footer to the bottom, I’ve resolved to this;

Footer Section

- Display: Flex
- Position: Normal

Container inside the Footer

- Position: Fixed
- Bottom: 0 px

Main Section  
Set the height of the main section to take up the viewport height and subtract the height of your Header and Footer) eg

- Height: “calc(100vh - (58px + 18px))”

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [July 27, 2023, 2:05pm UTC](https://community.weweb.io/t/how-do-i-make-a-sticky-footer/3685/3 "2023-07-27T14:05:12Z")

</div>

Thanks SO much Michael. I’m so glad to hear that I’m not the only one who struggles with building layouts in weweb! It’s taking me so long to build my SAAS app (100+ screens) cause I have issues like this on virtually every screen. There is definitely a need for a master class with regards to layout. I’ve been trying to convince Gregory John [@\_gregoryjohn on twitter] to do a course on weweb. He’s an outstanding teacher of the bubble platform, and he would be perfect to do that class.

---

<div class="post-metadata">

**Author:** ![fredo22](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fredo22/32/2283_2.png) [@fredo22](https://community.weweb.io/u/fredo22)\
**Post date:** [August 5, 2023, 9:04pm UTC](https://community.weweb.io/t/how-do-i-make-a-sticky-footer/3685/4 "2023-08-05T21:04:28Z")

</div>

@MichaelLovell , this has allowed me to fix the footer to the bottom of the screen, but the calc for the height of the main section is not working for me. I set the main section height to **calc(100vh - (58px + 18px))** as you suggested [replacing my actual header and footer dimensions] but i get a current value of “INVALID OR UNEXPECTED TOKEN” . I get this whether or not I include your quotation marks. Is there something obvious I’m doing wrong?

---

<div class="post-metadata">

**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\
**Post date:** [August 7, 2023, 12:11am UTC](https://community.weweb.io/t/how-do-i-make-a-sticky-footer/3685/5 "2023-08-07T00:11:42Z")

</div>

@fredo22 Have you got the double quotations around the formula?

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9c4e2497b8746a19c833a6d227b4d50f837cdc37.png)