Stick footer to the bottom of the browser

[CyberAP]

Tried to do this via height: 100% to html and body, min-height: 100% to footer but page is getting too big.
Please, how can I do this?

 

[Jake Bunce]

Hmm. I'm not sure I understand. But try this:

Admin CP -> Appearance -> Templates -> EXTRA.css

.footer
{
	position: absolute;
	bottom: 0px;
}

or this:

.footer
{
	position: fixed;
	bottom: 0px;
}

This will stick the footer to the bottom of the browser window, but it causes weirdness on long pages. It's hard to screenshot this. Try it out.

 

[CyberAP]

I understand what you're suggesting. Your code will place footer at the bottom, but I want footer to have a height that will cover all the space after content. Anyway thanks for the suggestion!

 

[CyberAP]

Got the example:
Here is what I have

And here is what I want to have

 

[Jake Bunce]

Admin CP -> Appearance -> Style Properties -> General

You can set different backgrounds for HTML and Body. The HTML background will cover the entire bottom, while Body will cover the top area.

 

[CyberAP]

The problem is that I want my background start from footer area

 

[Jake Bunce]

In addition to the color changes in my last post, try adding this to EXTRA.css:

.footer, .footer .pageContent, .footerLegal
{
	background-color: @html.background-color !important;
}