Archived topic
Full-height page
4 replies · Started by diana on April 30, 2021
Hi, I just setup a simple home page for my new website. I have only single container and footer. I found on this forum how to make that container full height setting min-height to 100vh. However that doesnt take footer height into account. This provokes the footer to go off-screen and creates scroll-bar on the side.
I want to find a solution where the footer will be aligned to the bottom of the window rather than float in the middle of the page.
How can I make this work? Any help will be appreciated.
Hi Diana,
In GB min-height section, you can't enter values other than numbers, so custom CSS is required.
We could give the container a custom class. for eg. full-height, then use CSS to exclude the footer and header height:
.gb-container.full-height {
min-height: calc(100vh - 254px);
}254px is the total height of your header and footer.
Let me know :)
Hi Ying, thanks for the reply. I will give it a try. Is footer and header height always the same across all devices?
It looks like the proposed solution worked. The only outstanding question is whether the footer and header heights are always fixed in height across all device sizes.
As I can see, your current header and footer height in mobile is 183px in total.
So we can add a media query using the same CSS:
@media (max-width: 768px) {
.gb-container.full-height {
min-height: calc(100vh - 183px);
}
}