Forum Academy Marketplace Showcase Pricing Features

Need help filling page height!

I can’t seem to get my single page app to fill the page height. I would like it to fill the page (minus the header). is there any way to do this?

Hey!

Can you be more specific? With images am more details?

Anyway, take a look here. See if helps…

1 Like

You can do this by using some JS/CSS, it’s pretty simple:

  1. Add HTML header to page:
body { min-height: calc(100vh - 39px); } [http://.main-page.bubble-element.Page/].main-page.bubble-element.Page { min-height: calc(100vh - 39px); }

Where 39px is a height of iphone x notch.

Hello and Thank you for responding!

I am currently working on an app that is responsive down to any screen width and seem to be fine that way but am having trouble with it filling the entire page by height.

I am currently building a single page app that is structured with a Header as my Nav and using Custom States to switch between pages.

I have a Group as my “Group Home” that is acting as my home page. My problem is that when I render the page in different screen heights (when page height > group home height), the Group home is having a fixed height and I would like it to fill the screen. is there a way to have the Group Home extend to the whole screen?

I will take a look at the link you provided as it will help when I take the next step and turn this into a mobile app!

Thank you for responding!

I am pretty new to Bubble so I am still getting to know everything. I am currently only working on a computer version on my app. Would this also work on desktop size screens? also what is the best way to add html to my app?

I have no coding experience so I am sorry if I don’t make sense.

Yes! It will work also! You only need to remove “-39px” to leave only 100vh in your script.

What is a vh you can read here: https://www.sitepoint.com/css-viewport-units-quick-start/

Where to include this? When you double-click on your page, settings window will open:

On below section you can find “Page HTML header”, includ this script there and voila!

Thank you for all the help! Your solution worked with getting my Page to render to the right height! As I fixed one problem another occurred! (of course right ha)

I have colored my groups to show the problem I am running into now. I am building a single page app using Groups and Custom States for page navigation. I will insert a Photo to show what happens when the screen is too tall for my group.

As you can see I have run into a bit of a problem with filling my page. do you have any suggestions? The groups don’t seem to be dynamic with regards to height of the page. Is there a way to fix this?

Thank you for all your help!

Hello!

I wanted to attach a picture to see if there is anyway you could help with this.

As you can see I am creating a single page app using groups and custom states for page navigation. I have figured out the Page height but the group heights do not scale based on the screen size leaving a lot of space underneath when the page is too tall. Also does not shrink down when screen is smaller.

Any help would be much appreciated!
Thank you

Try with floating group, or you can do a little workaroud, go to Settings → General → Expose the option to add an ID Attribute to HTML Elements and thic it.

Then go to Group Settings and on the below settings you can assign ID Attribute, for example group1:

Then you can add following JS script in same way as before:
#group1 { min-height: 100vh; }