[Support request] Full-height page

[diana]

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.

[Ying]

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 🙂

[diana]

Hi Ying, thanks for the reply. I will give it a try. Is footer and header height always the same across all devices?

[diana]

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.

[Ying]

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);
    }
}

[Author]

Posts