Grow your CSS skills. Land your dream job.

sticky-footer/expanding content box question

  • # January 17, 2012 at 11:10 am

    This has probably been covered somewhere else already, but I haven’t been able to find it. I’m using a sticky footer method, and it seems fine, but I can’t get the content box to expand down to the footer. I used to use repeating images to fix this, but I’m trying to be all css now. Link

    # January 17, 2012 at 11:35 am

    Also, the body background is the size of the window, not the size of the page. Here is a longer page to demonstrate.

    # January 17, 2012 at 12:26 pm

    for you body problem, you could try adding overflow:auto; to your body {}

    # January 17, 2012 at 12:42 pm

    Thanks. That seems to work, though I still have some bugs, I think because I’m using html5 boilerplate for the first time and need to tweek it. Still trying to figure out the expanding content thing now.

    # January 17, 2012 at 12:54 pm

    sorry, just realised that you have 2 scrollbars now..

    for me it just worked, when you remove overscroll:auto from body {} and add your gradient to .wrap


    body > .wrap {
    height: auto;
    min-height: 100%;
    background: #26382b; /* Old browsers */
    background: -moz-linear-gradient(top, #26382b 0%, #354f3c 0%, #000000 100%, #000000 100%); /* FF3.6+ */
    ...
    }
    # January 17, 2012 at 6:55 pm

    Thanks Timmey, that worked great! I wouldn’t have thought of that, and I still don’t understand why that works. Maybe my other problem will be solved by applying a horizontal gradient and width to the .pad-bottom element. Trying that next.

    # January 18, 2012 at 12:42 am

    Damn! Applying a background to the .pad-bottom element didn’t work. At least my footer is sticky, it seems. Any other ideas?

    # January 19, 2012 at 11:45 am

    Well, sod it. I can’t figure out a way of doing this without extra mark-up or adding an unnecessary image. I’ll just round off the bottom corners and be done with it for now, if I figure it out I’ll share.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".