CSS Bottom Bar

HTML & CSS
1

hi everybody
I’m trying to make a css bottom bar. seems to be very popular nowadays…
everything works OK, except for one problem
whenever the bottom bar appears (its not on all pages) it blocks the content behind it
i would like the bar to actually be lower then the last bit of page content
how can this be accomplished
here’s my markup so far (its aspx)

<%@ Control Language="VB" CodeFile="CommandBar.ascx.vb" Inherits="Controls_CommandBar" %>
<%@ Register TagName="Image" Src="Image.ascx" TagPrefix="mch" %>
<div style="bottom: 0; left: 0; right: 0; position: fixed">
    <asp:Panel ID="pnlMain" runat="server" Width="100%" BackColor="#000000">
        <div style="padding: 10px; color: White; font-weight: bold; text-decoration: none; text-align: center">
            <asp:PlaceHolder ID="ph" runat="server" />
        </div>
    </asp:Panel>
</div>

how can i fix the problem?
some have suggested using margintop, but i doesn’t seem to help me
i know i could just add some br’s to the page bottom, but that’s wrong for pages that don’t have the bar, and also, the bar’s height may change
thank you very much

2

Hi yisman, welcome to SitePoint. :slight_smile:

I think what you are seeking is a “sticky footer”. There is a really good sticky thread about this here: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3

See if that helps, and post back if you have questions.

BTW, when posting code, it’s better just grab the generated HTML, rather than posting all that aspx stuff. It just gets in the way.

3

hello ralph.m
thank u very much 4 the link
but that link, same as in my post. uses a buffer at the bottom of the page, which looks a little odd when the sticky footer is not around
the question is, is it possible without adding extra space to the page?
and thanks for the last tip about the generated html, didnt think of that!!:slight_smile:

4

Hi,

If you think about what you are asking then it becomes clear than no solution can provide the answer you need depending on the two different criteria you propose. If the footer is present then you account for it. If it is not present then you have to remove the method that you were using to account for it.:wink:

It seems you are using a fixed footer at the bottom of the viewport which means that content will go behind the footer and in order to see it you will need to add a buffer to the last element on the page so that you can scroll the content into view and above your fixed footer.

Usually you would do this with some simple bottom padding on your parent container but the amount of padding of course has to match the height of your footer so in fact fixed (or even sticky) footers are absolutely no use when the footer height is a variable and therefore should not be used.

Fixed footers are best for a fixed height non changing element (like a small copyright message or sitemap link). Otherwise just use a normal footer and avoid the issue altogether.

If some of your pages have the footer and some don’t then just add a class to the body tag on the pages without the footer and remove the extra padding from the element that you are using.

e…g


body.nofooter #outer{padding-bottom:0}

However I don’t see a problem in leaving an extra 50 pixels of padding or so on the bottom anyway as no one will complain :slight_smile:

If your footer is a very tall then it shouldn’t be a fixed footer in the first place and a regular footer used instead.

Hope that’s of some use.