Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    28
    Thanks
    2
    Thanked 3 Times in 3 Posts

    Unusual footer behavior

    The footer of my page seems to be acting up. The height of the page expands with jquery, and more content becomes visible. But, the footer seems to scroll down only so far and then stop to where it's covering content instead of sitting at the bottom as it should. My code may be a little sketchy, as I am still getting everything together and haven't had time to make it look pretty

    CSS for footer div:
    Code:
    #footer{
        position:absolute;
        margin-bottom:0px;
        margin-top:150px;
        margin-left:auto;
        width:100%;
        height:380px;
        padding-top:20px;
        background-color:#0F0F0F;
        background-image:url(images/footBack.jpg);
        background-repeat:repeat;
    }
    URL to the page:http://www.mattboldt.com/2.0

    Click on the first box on the left titled "web"

    Any help would be great.

    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well you don't assign any bottom or left values to your footer. The left one isn't that big of an issue but the bottom one is. Why is your footer position:absolute anyways if it is supposed to be at the bottom of the content? Are you trying to do a sticky footer type thing? Even if you did specify bottom, it would only be of the body element which in this case is just the height of the window, not your content. I use this for sticky footers.

    http://www.cssstickyfooter.com/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Matt Boldt (10-10-2010)

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    28
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Thank you! The sticky footer method worked perfect. What I was trying to do is keep the footer out of sight until you scroll down, or click the contact button that scrolls down to it. Now, no matter what screen resolution, it works perfectly!

    That's the reason I had the absolute positioning going on, is because if I didn't the footer would not have stuck to the bottom and adapted to the lack of content.

    Thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •