I am in the process of building out our landing page templates and have not gone live with any. Some templates in use have a lot of sections removed, and I am worried that the page won't extend to fill the screen (meaning the footer will be half way up).
Is this going to happen? If so, how do I make sure the footer actually gets to the bottom of the page?
See example template.
If your existing design accomodates it, you can use
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
as noted here, but bear in mind that boilerplate CSS can't always just be popped into an existing template, depends on what else your designer is doing.
The "proper" solution would be to use CSS as Sanford mentioned here, there's a few ways to stick something to the bottom of a page, if you can share a link to that page once you approve it, I'd be happy to test something out in the inspector that you could add in to iron this out.
A more hacky way of going about this would be to set a min-height or add a bunch of line breaks to the page to push the footer down. This isn't ideal b/c it might look good on your desktop, but tablet and mobile will be the same distance from the top so you'd have too much empty space in those devices (ie you can really only set it up ideally for ONE viewport dimension but not the others).