How to Fill in the Dead Space Underneath the Footer for Short Pages

[Base12]

I am looking for a solution to fill in the dead space underneath the Footer with a gradient and a color for pages that are too short to go past the bottom of the browser.

Here is a simplified project...

https://www.mostholyplace.org/misc/test ... footer.wbs

If you preview the index page in a maximized browser session on a typical PC monitor, you should see something like this...



I would like to have the gradient (seen underneath the Footer) stretch (flex?) and fill the rest of the bottom area similar to how the left and right side automatically adjusts as the window shrinks. It would shrink to zero pixels for pages that extend pass the bottom of the browser. Again, similar to the side gradients.

Is there a way to do this?

The demo project is using Flex Grid, but it can use something else if necessary.

Thanks!

[Pablo]

Maybe you can set the background of the page to gradient instead of the flex grid?

[Base12]

Maybe you can set the background of the page to gradient instead of the flex grid?

Unfortunately, I am already using a background image of clouds...

https://www.mostholyplace.org/about.html

However, I did find a solution that comes really close to solving my issue. If I change the overall height of the bottom Flex Grid to 100vh, the Flex Grid now grows and shrinks vertically!

Here is the updated demo project (with 'droplets' background instead of clouds)...

https://www.mostholyplace.org/misc/test ... ooter2.wbs

The only problem is that a scroll bar pops up and adds the extra height of the Header and Content Place Holder.

I need to somehow have a 100vh on the bottom Flex Grid and then subtract the height of the Header and Content Place Holder to get a perfect height with no scroll bar.

If you or someone here can post a way to do that, I would appreciate it.

I noticed other folks are having similar issues...

https://stackoverflow.com/questions/341 ... low-footer

https://github.com/understrap/understrap/issues/525

[Base12]

I found some code that might work...

Code: Select all

height: calc(100vh - ???px);

I Just need to be able to get the height for each page as a variable and input that into the code automatically.

This person found a possible solution...

https://forum.bricksbuilder.io/t/how-to ... ight/10693

Code: Select all

height: calc(100vh - var(--sl-header-height));

More info...

https://stackoverflow.com/questions/101 ... nus-header

[Base12]

** UPDATE **

I was able to successfully insert this code into the object 'Flex Grid2' on the Master Page...

Code: Select all

height: calc(100vh - 350px);

Obviously, this only works for pages with a total height of 350px.

I made the Index page conform to that height (100px Header Height + 250px Content Height = 350px Total Height).

Here is the new demo project...

https://www.mostholyplace.org/misc/test ... ooter3.wbs

When previewing the Index page in a browser, the bottom Flex Grid is now 'responsive' without any scroll bar.

Page1; however, is set to 1500px high and thus the CSS code needs to be variable somehow to make this page work properly.

If anyone knows how I can edit the CSS code to add a variable that reads the pixel height I would appreciate it.

Thanks!

[Base12]

** UPDATE **

From what I can tell, this task will require a little bit of Java code.

I was able to get some starter code from here...

https://forum.bricksbuilder.io/t/how-to ... ight/10693

So far, I have it working in a simple project in WYSIWYG Builder.

[Base12]

** UPDATE **

I was able to succesfully incorporate the Java code and provide a solution for those interested.

The demo project can be downloaded here...

https://www.mostholyplace.org/misc/test ... ooter4.wbs

The sample project can be previewed here...

https://www.mostholyplace.org/misc/test ... e_footer/4

The JavaScript is embedded in the project on the Master Page as an HTML Object to make file sharing easier.

Here is the code...

Code: Select all

<script>
// get contentarea height
function getcontentareaheight()

{

// select contentarea element
const contentarea = document.querySelector('#FlexGrid1');

// get rendered styles
const styles = window.getComputedStyle(contentarea);

// set contentarea height rendered style
const contentareaheight = styles.height;

// set CSS as a value
document.documentElement.style.setProperty("--contentarea_height", contentareaheight);

}

addEventListener("resize", getcontentareaheight);
addEventListener("orientationchange", getcontentareaheight);
getcontentareaheight();
</script>

Under 'type' I put it at 'end of page'. I have no idea if that is a good idea or not.

Please note that this is the first time I ever made a Java Script, so use with caution.

The Footer on the Master Page has CSS embedded as well...

Code: Select all

height:calc(100vh - 100px - var(--contentarea_height));

I subtracted 100 pixels for the Header.

Suggestions on how to improve are welcome.