CSS Sticky Footer with text content

HTML & CSS
1

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

There’s a much better article here about sticky footers:

Read through that and see if it helps. :slight_smile:

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

3

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

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

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.


<!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

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

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

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!