0

I have Rails application with bootstrap 2.1.0 (i use twitter-bootstrap-rails gem for that). But i can't get working footer. It is not visible unless i scroll down the page. I can't get how to fix that.

Application.html.haml

!!!
%html
  %head
    %title MyApp
    = stylesheet_link_tag    "application", :media => "all"
    = javascript_include_tag "application"
    = csrf_meta_tags
    %meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0"  }
  %body
    %div{ :class => "wrapper" }
      = render 'layouts/navbar_template'

      %div{ :class => "container-fluid" }
        - flash.each do |key, value|
          = content_tag( :div, value, :class => "alert alert-#{key}" )
        %div{ :class => "row-fluid" }
          %div{:class => "span10"}
            =yield
          %div{:class => "span2"}
            %h2 Test sidebar

    %footer{ :class => "footer" }
      = debug(params) if Rails.env.development?

bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap";
body { 
    padding-top: 60px;
}

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not 
//       have the proper paths. So for now we use the absolute path.
@fontAwesomeEotPath: '/assets/fontawesome-webfont.eot';
@fontAwesomeWoffPath: '/assets/fontawesome-webfont.woff';
@fontAwesomeTtfPath: '/assets/fontawesome-webfont.ttf';
@fontAwesomeSvgPath: '/assets/fontawesome-webfont.svg';

// Font Awesome
@import "fontawesome";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;

//MY CSS IS HERE.
html, body {
    height: 100%;
}
footer {
    color: #666;
    background: #F5F5F5;
    padding: 17px 0 18px 0;
    border-top: 1px solid #000;
}
footer a {
    color: #999;
}
footer a:hover {
    color: #efefef;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 10px;
    margin-bottom: -10px;
}
ExiRe
  • 4,727
  • 7
  • 47
  • 92

2 Answers2

0

check this page and source code may be this can help

http://www.martinbean.co.uk/bootstrap/sticky-footer/

also check out the discussion here they have suggested a way to have sticky footer

https://github.com/twitter/bootstrap/issues/306

Pritesh Jain
  • 9,106
  • 4
  • 37
  • 51
0

Try adding the following css to your footer. "Position fixed" will show your footer in the same place regardless of where the user scrolls to on the page. "Bottom 0" will align your footer flush along the bottom of the screen.

position: fixed;
bottom:0;

Hope this helps! :)

Kevin Shen
  • 48
  • 5