Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Sticky Footer Issue

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #30861
    rtmedia
    Member

    Basically I had problems making my footer stick to the bottom of the page. Some of my pages on my website are taller in height than others and sometimes my footer would appear half way up the page. I’ve managed to get my footer to stick to the bottom of each page. But it’s to far to the bottom now. Meaning that even if there is a small amount of content on the page you have to scroll down to see the footer and I can’t figure out why???

    Please look at the following to see what I mean http://www.theskinpharmacy.co.uk/about_company.php

    I think it’s something to do with this part of my CSS:

    .container {
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
    min-height: 100%;
    padding-right: 20px;
    width: 968px;

    .footer, .push {
    clear: both;
    height: 4em;
    margin: 0 auto;
    width: 968px;

    No matter what I change in my CSS I can’t seem to get my pages so I don’t have to scroll down what looks to be (4em) in order to see the footer on each page (no matter how big the content stretches the container down)

    #71570
    rtmedia
    Member

    Thanks for pointing out the contact page height. I had that there from before I added the push and sticky footer. The extra div on the contact page is there for a reason as it will allow my client to add more text there via the CMS.

    I changed the footer back to height:4em but all that did was make the actual content of the footer further from the bottom.

    So you still have to scroll down the page to see the footer… any ideas?

    #71376
    rtmedia
    Member

    anyone know why you have to scroll down on the page to see the footer when the content isn;t even filling up the height of the browser window?

    http://www.theskinpharmacy.co.uk/index.php

    #70975
    rtmedia
    Member

    Hi Virtual,

    Really appreciate you taking the time to help me out.

    On the code posted above I don’t understand

    html:before, #container:before

    Do I actually need this in my code or do you mean this is what was there before?

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.