1. 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

Discussion in 'XenForo Questions and Support' started by CyberAP, Mar 20, 2011.

  1. CyberAP

    CyberAP Well-Known Member

    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?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    Klaudius, Michael Dance and CyberAP like this.
  3. CyberAP

    CyberAP Well-Known Member

    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!
     
  4. CyberAP

    CyberAP Well-Known Member

    Got the example:
    Here is what I have
    scr1.PNG
    And here is what I want to have
    scr2.PNG
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  6. CyberAP

    CyberAP Well-Known Member

    The problem is that I want my background start from footer area
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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;
    }
    
     

Share This Page