100% Height Full Screen in Bubble.io

Creating a Full-Screen Sidebar in Bubble.io

From within the Bubble editor you can't set a responsive height for a page. What I mean by that is look at I've got this sidebar here I've got an icon at the top not my logo and I've got a logout button at the bottom and I want to make sure that logout is always anchored to the bottom of the page. So let me show you how I've done that but before I do so if you're learning Bubble and you want to access hundreds of Bubble tutorial videos many of which you cannot find on YouTube you need to check out our website planetnodecode.com.

Implementing the Full-Screen Sidebar

Let me show you how I've done this with just a few lines of custom CSS. By going onto the page let me just express the layout here I've got my page as a row and I've got my group here acting as my sidebar that's set as a column and I have the container alignment space between that's how it's forcing login right down to the bottom. But how is it that I'm making sure that the sidebar expands to fit the full viewport height?

Setting the Height to 100%

So one way I've got that going is by showing that my height here is a hundred percent that then delegates up the overall height to a container on the page. So if I'm in my browser here and I'm just going to right-click on the page bring up the inspect tools here they are and I am looking for this one here this is the class in CSS that I want to override Bubble our container.

Overriding Bubble's Default Behavior

Now this is this approach you know we're kind of bending Bubble against what Bubble provides us the tools to do so this might change it might become broken at some point but for now you can take this class Bubble our container and in settings go to your SEO settings and you can add in code just like this which is basically setting a CSS override a style override and we're saying that take the Bubble our container element on the page and force its height to a hundred percent viewport height and then just because we're really having to force it because Bubble wants to set its own height for the page we add in important that's saying that this CSS statement here takes precedent over any others.

Conclusion

Like I say this is a little bit kind of brute force so it might break might work in the future but it does allow you to get a nice height responsive design just like this.