bluenex/sticky_footer.md

## sticky_footer.md

      
    Raw
  

              sticky_footer.md
            
          
    Note for html+css footer

There are many ways to create webpage footer by using fixed or absolute. Here is a note of footer implemented by absolute positioning.

1. By creating holder

HTML

<div id="holder">
    <div id="header">Title</div>
    <div id="body">Body</div>
    <div id="footer">Footer</div>
</div>
CSS

html,body{
    height: 100%
}

#header{
    background-color: yellow;
    height: 100px;
    width: 100%;
}

#holder {
    min-height: 100%;
    position:relative;
}

#body {
    padding-bottom: 100px;
}

#footer{
    background-color: lime;
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    right: 0;
}

2. By creating pusher (credit Ryanfait)

HTML

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
CSS

* {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
}