Page 1 of 1
How to Fill in the Dead Space Underneath the Footer for Short Pages
Posted: Sat Sep 28, 2024 3:05 am
by 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!
Re: How to Fill in the Dead Space Underneath the Footer for Short Pages
Posted: Sat Sep 28, 2024 6:02 am
by Pablo
Maybe you can set the background of the page to gradient instead of the flex grid?
Re: How to Fill in the Dead Space Underneath the Footer for Short Pages
Posted: Sat Sep 28, 2024 7:47 pm
by Base12
Pablo wrote: ↑Sat Sep 28, 2024 6:02 am
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
Re: How to Fill in the Dead Space Underneath the Footer for Short Pages
Posted: Sat Sep 28, 2024 9:27 pm
by Base12
I found some code that might work...
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
Re: How to Fill in the Dead Space Underneath the Footer for Short Pages
Posted: Sat Sep 28, 2024 10:07 pm
by Base12
** UPDATE **
I was able to successfully insert this code into the object 'Flex Grid2' on the Master Page...
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!
Re: How to Fill in the Dead Space Underneath the Footer for Short Pages
Posted: Mon Sep 30, 2024 1:36 am
by 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.
Re: How to Fill in the Dead Space Underneath the Footer for Short Pages
Posted: Mon Sep 30, 2024 5:07 am
by 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.