css footer position stick to bottom of browser?

css overflow position footer fixed
brightmist.co.uk picture brightmist.co.uk · Apr 3, 2010 · Viewed 58.3k times · Source

I'm having a problem with my site http://artygirl.co.uk/pixie/about/ I can't seem to get the footer to automatically stick to the bottom of the browser, and show the rest of my background. Is there a solution better than using position:fixed or absolute?

I think there are possibly other styles over-riding some tests I do in firebug.

Thanks for your help Regards Judi

Answer

Boondog picture Boondog · Dec 13, 2011

CSS:

.podbar {
    bottom:0;
    position:fixed;
    z-index:150;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-this.offsetHeight)));
    height:35px;
}

HTML:

<div class="podbar">
    Put your footer here
</div>

This will create a sticky that will always appear at the bottom of the page and overlay everything. Just add extra margin/padding to the bottom of your main container divs equal to the height of footer +5px so it doesn't overlay your content.

Works in pretty much every browser I have tested.

Related questions

Make content of div scrollable

I am using wordpress with woocommerce to create eshop. Woocommerce has part called mini-cart.php it is actual cart of customer. However I need this cart to be max 60% of height of whole site and I need content of cart …

Read More
Position absolute div in a overflow-y: scroll div

I have the following HTML: <div class="container"> <div class="scrollable-block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, …

Read More
Limit text length to n lines using CSS

Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically). text-overflow: ellipsis; only works for 1 line text. original text: Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, …

Read More