Last Updated: February 25, 2016

How to have the footer at the bottom of the window

Without introduction, layout html :

<body>
    <div class="wrapper">
        <div class="wrapper-main">
            <div class="wrapper-header">
                <a href="/">Home</a>
            </div>
            <div class="wrapper-content">
                your page content
            </div>
        </div>
        <div class="wrapper-footer">
            <span>my footer is at the bottom</span>
        </div>
    </div>
</body>

About the css :

html, body { height:100%; }
.wrapper {
    min-height:100%;
    height:auto !important;
    position:relative;
}
.wrapper-main {
    width:1024px;
    margin:0 auto;
    padding-bottom:30px; /* Height of the footer */
}
.wrapper-footer {
    height:30px;
    position:absolute;
    bottom:0;
}

There is many way to put the footer at the bottom, but I choosed to present you this one, which is enough easy to use.

The more important to understand is this solution require that you know the height of your footer. If not, you should use another technique.

Compatible in all browsers.

#css

#layout