Make page take up full height

[aleminopuy]

Hello!

I built a very simple page, but the total height of the header, body, and footer, is less than the browser height on some resolutions, etc.

How can I have the page or perhaps the body stretch so that the header is always at the bottom of the window, even if there isn’t “enough” content to fill the screen? I really want to avoid this dead white area below the footer. Ideally, the body section would just get longer.

Site: lionsradio.org

[ruenel]

Hello @aleminopuy,

Thanks for writing in!

Please refer to these old threads instead:

• Space under footer - fix
• Force Footer to Bottom of Page

Best Regards.

[deranaloge]

hi,
i do it this way:
setup a fix height for header: eg. 5em
setup ix height for footer: eg. 5em
now setup this height to the column: calc(100vh - 10em)

now the column has a responsive height.

for smaller devices you should set the height of the column, header and footer to auto, so the content of this elements is viewable on smaller devices to.
as an example for the column:
dekstop : calc(100vh - 10em)
laptop: calc(100vh - 10em)
tablet: auto
mobile landscape: auto
mobile portrait: auto

example header and footer:
dekstop : 5em
laptop: 5em
tablet: auto
mobile landscape: auto
mobile portrait: auto

cheers

[deranaloge]

and dont forget to setup a min height for the column too, so the content is always visible. you can try it out before you enter examples above
cheers

[ruenel]

Hello Harald,

Based on this thread, Space under footer - fix - Support - Themeco Forum, you should have something like min-height: calc(100vh - 318px); where 318 pixels is the total height of the header(140px) and of the footer (178px).

Best Regards.