• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Stick footer to the bottom of the browser

CyberAP

Well-known member
#1
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

XenForo moderator
Staff member
#2
Hmm. I'm not sure I understand. But try this:

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

Code:
.footer
{
	position: absolute;
	bottom: 0px;
}
or this:

Code:
.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

Well-known member
#3
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!
 

Jake Bunce

XenForo moderator
Staff member
#5
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.
 

Jake Bunce

XenForo moderator
Staff member
#7
In addition to the color changes in my last post, try adding this to EXTRA.css:

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