Hi , I went thru the procedure in Docs to add a footer and it all worked well in the viewport with the footer ending down at the bottom of the page.
But when viewed in the browser, the footer decides to go back to top, how can I get it to stay at the bottom. I have republished, so that is not the problem.
BruceX
Hi, Bruce
Your Main area is empty. There is no content in it, or a block with a fixed height. It is for this reason that your footer follows immediately after the site header, because there is nothing between them.
Place the content or container with the specified height in the center area, then the footer will be placed at the bottom of the page.
Gotcha, I assumed that the live page would mirror the viewport in Wappler. Thanks for letting me know.
Actually, if done right, the footer should stay at the bottom no matter where it is viewed.
The idea is
Header
Main - use flexbox to expand to remaining available space, pushes footer down
Footer
Hi, that did not really work out. By Flexbox, do you mean to put a Flex Container into Main.
But then how do you get it to use 100% space down to where the footer should be?
Try please
Add new class to main
height = 100vh
Or
Height = calc(100vh - 80px)
Is this what you mean? In design I created a new class Main-Height and gave it a min height of 80vh
The footer behaves in Wappler but on a web page it does not respond and stays near the top Navbar
.
Have a look at 2:14 of this video
https://www.youtube.com/watch?v=pYUqTm72xLE&t=641s
Thank you for the hint, I had already found and done this, which is why my footer is at the bottom of the page INSIDE wappler, but not at the bottom in my browser (chrome).
Not once in this tutorial does the narrator try his web site in a browser, which is where the problem is.
I trimmed my style.css to exactly match the one in the tutorial and checked that it was being saved to the web site proper, it was, so I am perplexed. IS this a reportable bug?
Please provide a link to your page where we can check this. It’s not a bug, something is not properly set up either in your html or in the css.
if there is anything else I can do please let me know
Works as expected:
If you are not seeing the same way in your browser, then it’s probably caching your old CSS, so you just need to clear the browser cache and reload the page.
Yep, the ol’ cache trick again.
