SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Sticky Footer with text content

    Hi,

    I've used Make a Footer Stick to the Bottom of the Page successfully to create a sticky footer for my template. However, my footer consists of purely text content i.e. the height it spans will vary depending on the size of the window. Thus, when I resize the window to a smaller size, the text will overflow outside its container because I've specified a fixed height for the container. Is there any way I can ensure the container will expand with the text when the height the text in the container spans over becomes greater than the height set for the container?

    Many thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    There's a much better article here about sticky footers:

    http://www.sitepoint.com/forums/1239966-post3.html

    Read through that and see if it helps.

    Setting a fixed height on a container is rarely a good idea.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Bred View Post
    Hi,

    I've used Make a Footer Stick to the Bottom of the Page successfully to create a sticky footer for my template. However, my footer consists of purely text content i.e. the height it spans will vary depending on the size of the window. Thus, when I resize the window to a smaller size, the text will overflow outside its container because I've specified a fixed height for the container. Is there any way I can ensure the container will expand with the text when the height the text in the container spans over becomes greater than the height set for the container?

    Many thanks.
    Hi,

    That Ryan Fait footer is broken in IE7/8 and opera and I wouldn't use it.

    The one we use here (see Ralphs link above) is the best and most consistent.

    In answer to your question then no there is no way to have a fluid height sticky footer because you can only make it sticky by knowing the height.

    You can use ems for text resize etc but you can't have it fluid unfortunately.

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I will look into the referenced post.

    I suppose what I can do is make the body background colour the same colour as the footer's.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You can use a min-height for the footer and when the content overflows it will just go below the fold so no real damage done.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Sticky Footer at Bottom</title>
    <style type="text/css">
    * {/* for demo only*/
        margin:0;
        padding:0
    }
    html, body {
        height:100%;/* needed to base 100% height on something known*/
        text-align:center;
    }
    #outer {
        width:50%;
        background:#ffffcc;
        margin:auto;
        min-height:100%;
        margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
        text-align:left;
        clear:both;
    }
    * html #outer {
        height:100%
    }
    #header {
        background:red;
        border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    #footer {/* footer now sits at bottom of window*/
        background:red;
        width:50%;
        margin:auto;
        min-height:40px;/* must match negative margin of #outer */
        clear:both;
    }
    * html #footer{height:40px}
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }
    h1, h2, p {
        padding:0 10px;
    }
    #outer:after {/* thank you Erik J - instead of using display table for ie8*/
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Sticky Footer</h1>
        </div>
        <h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    <div id="footer">
        <p>Footer content goes here Footer content goes hereFooter content goes hereFooter content goes hereFooter content goes hereFooter content goes hereFooter content goes here</p>
    </div>
    </body>
    </html>
    Just close the browser to see the effect. Although the height increases it just means that some text pushes down but you can still reach it via scrolling etc.

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I had min-height set already with overflow set to "visible". The text is displaying fine, but the overflowed text is displayed over the non-footer background colour. I've tried putting the footer in a container of its own that has the footer's background with a height set to 100%, but that doesn't seem to have made any difference.

    Thank you for the help so far.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hmm, have a look at my example again. It's the footer that has the min-height and the background stays track with the text so it doesn't overflow or run over the background.

    I'd need to see all your code to debug further but I believe the example I gave above is a good compromise for what you are asking.

  8. #8
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see where I went wrong. I had set both the height and min-height of #footer to match the negative margin of #outer (as opposed to just the min-height). Since removing the height value, the problem's been solved! Thanks a lot Paul - you've been brill!


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
  •