Home/ Questions/Q 6596213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:02:44+00:00

Trying to implement sticky footer but its not working as planned. It throws it

  • 0

Trying to implement “sticky” footer but its not working as planned. It throws it at the bottom and on first scroll it works as supposed to (except that it shows an inner-scroll bar). When scrolling back up, the stick footer doesn’t disappear right away, it takes a few scrolls then it seems to go back to the “bottom”. So my question is how do I keep the footer at the bottom at all times and eliminate the inner scroll bar. I am wondering if my absolute positioning is problematic on the main-content-inner. That div is expandable in height.

Problem Screenshot

Here is the code:

<div id="page-wrap">
  <div id="main-content>
    <div id="main-content-inner></div>
  </div>
  <div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>


#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;

}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {

text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;

}

.footerpush
{
height:20px;
}

If I remove overflow auto from page-wrap, the footer actually moves to the bottom of my page-wrap div. So it appears that because of my absolute main-content-inner being absolute, it is expanding outside of my wrapper? If I set a fixed value on the height of page-wrap, the footer moves to the bottom as it should. So this is the real question, how do I keep my footer at the bottom of the page even with expandable content?

Further research shows that when i set overflow to hidden on page wrap, that my absolute content “main-content-inner” gets cut off. How do I get the height of page-wrap expand to the height of main-content-inner, no matter what it is?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As I answered here, you can use http://www.cssstickyfooter.com/:

    <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                padding: 0;
            }

            #wrap {
                min-height: 100%;
            }

            #main {
                overflow:auto;
                padding-bottom: 150px; /* must be same height as the footer */
            }

            #footer {
                position: relative;
                margin-top: -150px; /* negative value of footer height */
                height: 150px;
                clear:both;
            } 

            /*Opera Fix*/
            body:before {
                content:"";
                height:100%;
                float:left;
                width:0;
                margin-top:-32767px;/
            }
        </style>
        <!--[if !IE 7]>
        <style type="text/css">
            #wrap {display:table;height:100%}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="wrap">
            <div id="main">
                <div id="content">
                    <!-- Main content here -->
                </div>
            </div>
        </div>
        <div id="footer">
            <!-- Footer content here -->
        </div>
    </body>
</html>

    You can see a working example here: http://jsfiddle.net/dZDUR/

    Resize the right-hand “Result” pane to be shorter/taller than the text
    to see the scroll bar appear / disappear.

    As per the CSS Sticky Footer how-to, you can insert your normal
    ‘column’ layout inside the main div.

    • 0