SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with Min Height and Footer

    Hello All

    I've tried to set a minimum height for my site, so that on larger or standard monitors the footer is always at the bottom of the page.

    To an extent my attempts have worked, and I have set a minimum height and the footer is always at the bottom.

    The problem is that the footer is always too far down, rather than being at the bottom of the page you actually have to scroll down to it. I've tried to fix this but can't work out how to

    Please take a the look at the site.

    http://www.westech-solar.co.uk/

    The CSS I have used for the site is the footer, (as well as putting height = 100% on the body) is

    #ja-footer {
    background: url(../images/mainwrap-bot2.gif) no-repeat center bottom;
    clear: both;
    margin: 0 0 0px;
    padding-bottom: 10px;
    position: relative;
    }

    Thanks all for your help

    Didcot84

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    There are some good resources for creating "sticky footers", such as this one:

    http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm

    There's also a good explanation for it here:

    http://www.sitepoint.com/forums/show...66&postcount=3

    See if these resources point you in the right direction.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The problem is that the footer is always too far down, rather than being at the bottom of the page you actually have to scroll down to it. I've tried to fix this but can't work out how to
    Hi,
    You have no height on your footer, for a sticky footer layout to work correctly the footer must have a fixed height. Then that height has to be recovered with negative margins in one of two ways.

    I have briefly explained the methods on the links below but I will explain a little further here.

    1) Top Border Footer Soak Up

    That method pulls the main wrapping div (div with min-height:100%) through the top of the viewport with a negative top margin that is equal to the footer height. That gets the footer at the bottom of the page but now a portion of the header is out of sight. The first element on the page (normally the header) then gets a top border on it that is equal to the footer height. That pushes the header back into the viewport while the footer stays at the bottom.

    2) Negative Margin Footer Pull

    This method drags the footer itself back into the viewport with a negative top margin. The footer is now sitting on top and hiding any content that may have been near the bottom of the page. To fix that an inner div must be nested in the main wrapping div (div with min-height:100%). The inner div gets a bottom padding on it that is equal to the footer height, that protects any content from sliding under the footer. You must use an inner div since you can't add any padding to the main wrapping div with min-height:100%, that would cause it to exceed the min-height and it would give a scrollbar even if there was minimal content.

    Now depending on which method you choose there are some bug fixes that must be used for the Opera and IE8 min-height:100% bugs. An explanation of them can be found in the FAQ link ralph provided.

    Here is an example of the #2 method I explained above with the Opera and IE8 bug fixes in place.

    Sticky footers are not always feasible due to the fact that the footer requires a fixed height but as long as your footer is not loaded with content then they work very well.

    Hope that helps

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2005
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All

    Thanks very much for this help, I will keep these for future reference.

    I'll try to add these to the site and I'll let you know how I got on.

    Thanks very much for this and taking the time to help me

  5. #5
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great info all in one spot. Thanks for sharing.


Bookmarks

Posting Permissions

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