2

I have a footer applied via CSS to my pages. If I log in as me (Admin) the footer is at the bottom of the page. If I log on as a test user with read rights the footer is always directly under where the content of the page finishes and not at the bottom. Any ideas?

footer {
    background: url('/_layouts/15/images/ForFarmers.Connect.Branding/bgfooter.png') right bottom no-repeat;
    clear: both;
    position:relative;
    width: 100%;
    height: 160px;
}
  • 2
    Is your css file checked in as a major version, published, and approved? This is a common symptom of it works for me and not a regular user. – Eric Alexander Dec 15 '15 at 17:22
  • It is stored on the server so it doesn't need to be checked in. – Mike Blair Dec 15 '15 at 17:23
  • It wasn't clear where it was being stored, I was assuming the style library. – Eric Alexander Dec 15 '15 at 17:26
3

Most likely because your admin page has more content on the page thus pushing the footer down.

You can fix the footer to the bottom with:

footer {
  background: url('/_layouts/15/images/ForFarmers.Connect.Branding/bgfooter.png') right bottom no-repeat;
  z-index:100;
  position:fixed;
  bottom:0px;
  width: 100%;
  height: 160px;
}

But it will cover the lower 160px of your content

update #1

http://www.eliostruyf.com/sticky-footer-solution-for-sharepoint-2013/

  • Hi thanks for the suggestion. I tried it but I know have scroll bars and the footer is sometimes in front of content? Any ideas? – Mike Blair Dec 16 '15 at 4:21
  • Ah, this is a sticky footer. I am looking to have a footer that is at the bottom of the page. – Mike Blair Dec 16 '15 at 9:56
  • So you need to combine all information from these answers and built your own. Because if the height of the page is smaller than the viewport you want it stuck to the bottom of the viewport (at least that is what I get from your question) – Danny '365CSI' Engelman Dec 16 '15 at 10:04
1

I used this CSS to create a sticky footer in SP2013 that does stay below content if the content extends below the bottom of the window, or sticks to the bottom of the window if the content is short:

#footer {
    clear: both;
    height: 100px;
    min-height: 100px;
    width:100%;
    background-color: #2e2e2e;
    font-size: 11px;
    margin-top: auto;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.