SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS Bottom Bar

  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    0 Post(s)
    0 Thread(s)

    Question CSS Bottom Bar

    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)
    Code ASP:
    <%@ 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" />
    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    463 Post(s)
    8 Thread(s)
    Hi yisman, welcome to SitePoint.

    I think what you are seeking is a "sticky footer". There is a really good sticky thread about this here:

    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. #3
    SitePoint Member
    Join Date
    Oct 2010
    0 Post(s)
    0 Thread(s)
    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!!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    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.

    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.

    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

    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.

Tags for this Thread


Posting Permissions

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