# Container 100% height doesn't work!

**URL:** <https://forum.bubble.io/t/container-100-height-doesnt-work/356778>\
**Category:** Bugs\
**Created:** [January 23, 2025, 12:35pm UTC](https://forum.bubble.io/t/container-100-height-doesnt-work/356778 "2025-01-23T12:35:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![gus](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gus/32/256426_2.png) [@gus](https://forum.bubble.io/u/gus)\
**Post date:** [January 23, 2025, 12:35pm UTC](https://forum.bubble.io/t/container-100-height-doesnt-work/356778/1 "2025-01-23T12:35:49Z")

</div>

Hey bubblers, I am facing a strange behavior in one bubble app… when I try to set a container to 100% of the screen, it simply doesn’t work… the height goes far from 100% and I can’t discover why. This happens in all pages. This app was built using a template from Ez.

See how page is setup:

 ![Screenshot 2025-01-23 at 09.30.32](https://us1.discourse-cdn.com/bubble/original/3X/6/e/6e2ba70210d65eb9c7de9aad74ef08f541fab376.png)

Now see the container with the strange behaviour:

 ![Screenshot 2025-01-23 at 09.30.45](https://us1.discourse-cdn.com/bubble/original/3X/8/d/8d715ead9958f5dea8d8876f99971884a064184f.png)

 ![Screenshot 2025-01-23 at 09.37.16](https://us1.discourse-cdn.com/bubble/original/3X/8/4/8409bda9079e2d353184e9a746ffc4a5ec7ed785.png)

How it looks in test (Container is set to 100% min:

 ![Screenshot 2025-01-23 at 09.33.26](https://us1.discourse-cdn.com/bubble/original/3X/5/8/584c7dc8d7fc9aa030c6f9e6fae897ae14359688.png)

In that case, the container height is smaller than 100%, but in other pages it gets bigger, like 200%. Anyone have seen this?

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [January 23, 2025, 12:46pm UTC](https://forum.bubble.io/t/container-100-height-doesnt-work/356778/2 "2025-01-23T12:46:44Z")

</div>

There is no way in the Bubble editor to set the height of an element in reference to the view-port.

When setting an element’s height as a percentage, that’s in relation to its parent container (not the view-port).

So height: 100% means the element will be the full height of it’s parent contains (whatever that may be).

If you want to use viewport height then you’ll need to add the CSS directly.

---

<div class="post-metadata">

**Author:** ![gus](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gus/32/256426_2.png) [@gus](https://forum.bubble.io/u/gus)\
**Post date:** [January 23, 2025, 3:15pm UTC](https://forum.bubble.io/t/container-100-height-doesnt-work/356778/3 "2025-01-23T15:15:24Z")

</div>

I don’t get it, why does it work for other apps as expected?

See:

 ![Screenshot 2025-01-23 at 12.15.46](https://us1.discourse-cdn.com/bubble/original/3X/1/2/124bb9409634bd1869c46edf8a59c6e537c02521.png)

100% of the screen:

 ![Screenshot 2025-01-23 at 12.16.18](https://us1.discourse-cdn.com/bubble/original/3X/f/b/fb516ff5aecec3135df8ab4c9435d45d07d3b57b.png)

---

<div class="post-metadata">

**Author:** ![adamhholmes](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/adamhholmes/32/100510_2.png) [@adamhholmes](https://forum.bubble.io/u/adamhholmes)\
**Post date:** [January 23, 2025, 3:30pm UTC](https://forum.bubble.io/t/container-100-height-doesnt-work/356778/4 "2025-01-23T15:30:45Z")

</div>

If the parent container is the page, then of course the child element will be 100 % of the view port (or bigger, if the page height is more than the viewport).

Or if every parent container, up to the page, is set to 100% height.

---

<div class="post-metadata">

**Author:** ![jacob2](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jacob2/32/243491_2.png) [@jacob2](https://forum.bubble.io/u/jacob2)\
**Post date:** [January 23, 2025, 6:08pm UTC](https://forum.bubble.io/t/container-100-height-doesnt-work/356778/5 "2025-01-23T18:08:31Z")

</div>

Also he has a top margin there as well.

---

<div class="post-metadata">

**Author:** ![jacob2](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/jacob2/32/243491_2.png) [@jacob2](https://forum.bubble.io/u/jacob2)\
**Post date:** [January 23, 2025, 6:09pm UTC](https://forum.bubble.io/t/container-100-height-doesnt-work/356778/6 "2025-01-23T18:09:33Z")

</div>

Are there any children inside that group?

---

<div class="post-metadata">

**Author:** ![mitchbaylis](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mitchbaylis/32/122860_2.png) [@mitchbaylis](https://forum.bubble.io/u/mitchbaylis)\
**Post date:** [January 24, 2025, 3:03am UTC](https://forum.bubble.io/t/container-100-height-doesnt-work/356778/7 "2025-01-24T03:03:48Z")

</div>

you can get the viewport height using custom JS

just make sure to save it to a state on page load instead of dynamically referencing it - the dynamic reference can be glitchy if the page rerenders (the height changes)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [February 6, 2025, 12:36pm UTC](https://forum.bubble.io/t/container-100-height-doesnt-work/356778/8 "2025-02-06T12:36:00Z")

</div>

Closed on February 6, 2025, 12:36pm UTC

This topic was automatically closed after 14 days. New replies are no longer allowed.
