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;
}
