sticky_footer.html.haml

-# coding: utf-8

!!!5
%html
  %head
    %meta{ charset: "UTF-8" }
    %title TB Sticky Footer Mini
    %meta{content: "minimal source for sticky footer", name: "description"}

    %link{rel: "stylesheet", href: "http://twitter.github.io/bootstrap/assets/css/bootstrap.css"}

    :css
      /* * * * * * * * * *
       *  Sticky Footer  *
       * * * * * * * * * *

      ## HREF

      * [Sticky footer · Twitter Bootstrap](http://twitter.github.io/bootstrap/examples/sticky-footer.html)

      ## Remark

      * Don't forget to reset margins/paddings.
      * Do not use "HR" tag for footer border but use border-top.

      ## Required HTML Structure(minimal)

      ```haml
      %body
        %div#wrap
          %div.main
          %div#push
        %footer
      ```
      */

      html, body {
        height: 100%;
      }

      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -80px;
      }

      footer, #push {
        height: 80px;
      }
      footer {
        background-color: #EEE;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }

  %body
    #wrap
      .container.main{ role: "main" }
        .page-header
          Main Contants Goes Here.
        %p
          Do not use "HR" tag for footer border but use border-top.

        - 50.times do
          /<p class="fixie" />

      #push

    %footer
      -#%hr <- never use
      %div{ style: "border-top: 1px solid #CCC" }
        %center.container
          %p
            This Is Footer

    /%script{ type: "text/javascript", src: "https://raw.github.com/ryhan/fixie/master/fixie_min.js" }