Stopping footer "float"?

[CrackleFactory]

On my front page (template = Page: background slider), the footer hangs out at the bottom of the page, and stays there when the browser window is resized.

Is there any way to replicate that behavior on other page templates (in particular, Page: full-width and Page: right sidebar)? If the content area doesn’t have much content in it, the footer “rides up” and forms a stripe across the page, instead of tucking itself neatly at the bottom.

Many thanks,

~IW

[satori]

Hey Ian,

you can use

#footer {
margin-top: 0px;
position: fixed;
bottom: 0px;
}

to force it to stick to the bottom on all pages, yet the catch here is that the “bottom” will be defined as the bottom of the browser window – i.e. if the page’s content exceeds the window height, the footer will overlap it. Without resorting to hacky solutions, it’s possible to either tell the footer to consider the bottom of the screen as its starting point, or the bottom of content, not both. This is why there’s no content block on the “Page with Background Slider” page template.

Sincerely,
Andrii / Satori Studio

[CrackleFactory]

Found this, which seems to be working nicely:

html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 35px;
width: 100%;
}

• This reply was modified 8 years ago by CrackleFactory.

[satori]

Thanks for sharing, Ian! Yes, this snippet should do the job; I’m calling the likes of it “hacky” because it assumes we know the footer height in advance, which is usually not the case when developing themes that will potentially be used by thousands of people – who might put different amounts of content into the footer (in addition to that, on smaller screens that content will pack into a larger number of lines and therefore further change its height quite unpredictably, complicating this even further). However, for a specific website, where you do know the desired height of the footer, that can indeed be a neat solution.

Sincerely,
Andrii / Satori Studio

[CrackleFactory]

Oh, I don’t think of “hacky” as a bad thing at all! I’m no expert – my version of hacky is “Let’s stick this code in there and see if it does something.” That snippet was the second thing I tried, so I’m happy with the outcome.

[Author]

Posts