Search code examples
htmlcssfooterfixed

Fixed footer not pushed down by scroll content

I am working on a layout with the following attributes:

  1. Fixed header (content should scroll up under it)
  2. Fixed 100% height column (left menu)
  3. Content area
  4. Footer that A. sticks to bottom if content is short, or, B. is pushed down with longer content (off screen)

I have managed to get 1,2,3 and 4 A. working. But I can't get the footer to get pushed down by the longer content. I based my initial workings on css reset (example here:http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/), but, I am assuming that my fixed header and left column are not helping.

I'd really appreciate any pointers/suggestions on how I might overcome this.

Here is my code:

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Layout</title>

<style type="text/css">

html,
body { height: 100%; padding:0;margin:0; }

#sc_admin_wrapper { 
min-height:100%; 
position:relative; 
background:#fff; 
margin: 0; 
}
#sc_admin_header{
width:100%;
height:50px;
position:fixed;
top:0;
background: #212121;
z-index:9995;
color:#fff;
}

#sc_admin_logo { 
width:20%; 
float: left; 
}

#sc_admin_menu {
position:fixed;
top:50px;
bottom:0;
float:left;
width: 20%;
margin: 0;
background: #3d3d3d;
color: #fff;
}
#sc_admin_content { 
float: left; 
margin:50px 0 0 20%; 
width: 77%; 
padding: 0.5% 1.5% 30px 1.5%; 
}
#sc_admin_footer {
background: #ffcc00; 
width: 77%;
height: 30px;
position:absolute;
bottom:0;
left:0;
margin: 0px 0 0 20%; 
padding: 0 1.5% 0 1.5%; 
}
</style>

</head>
<body>

<div id="sc_admin_wrapper"> 

<div id="sc_admin_header"> 
    <div id="sc_admin_logo"><h1>Fixed header</h1></div>
    <div class="clear"></div>
</div>

<!-- / #sc_admin_header -->

<div id="sc_admin_menu">
    <p>Fixed height column at 100%;</p> 
    <div class="clear"></div>
</div> 

<!-- / #sc_admin_menu -->

<div id ="sc_admin_content">

    <div id="sc_msgs"></div>

    <p>This would be my short or long content.</p>

    <p>I should scroll under the header.</p>

    <p>My footer should be fixed at the bottom of the screen if content is 
    short, or, scroll should the content be longer.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.</p>                                       

    <div class="clear"></div>

</div> 

<!-- / #sc_admin_content -->

<div id="sc_admin_footer">
    This is my fixed footer     
    <div class="clear"></div>
</div>
<!-- / #sc_admin_footer -->
</div>
<!-- / #sc_admin_wrapper -->
</body>
</html>
Solution

  • Hmmm, I think you you almost got it right! You just missed a couple CSS/structural details. You need to add a style definition for the .clear class, as follows:

    .clear{
    clear:both;
}

    Then, you need to move the .clear div element at the bottom of .sc_admin_content out of it, so that it lies in between .sc_admin_content and .sc_admin_footer.

    Here's a JSFiddle example of what this would then look like. (Try deleting content and pressing "Run", and see that the footer stays stuck to the bottom!) If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!