Grow your CSS skills. Land your dream job.

Footer Bleeds Into Content If Using Browser Toolbars

  • MBM
    # July 6, 2012 at 11:32 pm

    In full screen mode the footer displays at the bottom of the screen as intended. If however there are several toolbars open in IE9 / Firefox / Opera the footer bleeds into the content and there is no vertical scrollbar.

    If I set overflow:auto in the body and remove bottom:0 from the footer styling, as in the link, the footer displays as it should with the toolbars on but in full screen mode there is a big gap between the footer and the bottom of the page! How do I keep the footer at the bottom of the screen in both full screen mode and when using toolbars?

    http://mbmitservices.co.uk/MMA/index.html

    body{
    font-family: 'Ubuntu Condensed', sans-serif;
    width:100%;
    height:100%;
    color:#ffffff;
    overflow:auto;
    }
    /*footer styling */
    #documentFooter{
    width:100%;
    margin-top:20px;
    padding-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 16px;
    background-color: #2864c4;
    border-bottom: 2px solid #fff;
    border-top: 2px solid #fff;
    color:#ffffff;
    position:absolute;
    left:0;
    /*bottom:0;*/
    }
    # July 7, 2012 at 3:06 am

    I think my first suggestion is just to remove the

    block from the content div, and have it in the main body since you’re having to absolutely position it in order to break it away from the content. That may help with the problem you’re having, but not positive.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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