Dominic M. Liddell

When your content doesn't fill the page, the footer won't stay at the bottom of the page by default. 

There are a lot of solutions available to solve this with javascript, CSS tables, and using .fixed.  I don't like these hacky solutions that provide inconsistent results.  Using CSS flex, you can achieve the desired results consistently using only CSS.

First, add a class to your body. I prefer to use the site name for easier file searching. In this case, let's name it sample.


<body class="sample-body">
...
</div>

Next, wrap your content like so:


<body class="sample-body">
<div class="sample-content">
...
</div>
  <footer>
  ...
</footer>
</body>

In your CSS, add styles to display the body as a flex column using vertical-height:


.sample-body {
display: flex;
min-height: 100vh;
flex-direction: column;
}

then make sure that the content takes up the full column:


.sample-content {
flex: 1;
}

Assuming that you have Rails and Postgres installed on your workstation, create a new app:


rails new myapp --database=postgresql

In the gemfile from your application directory, ensure that the following line is included


gem 'pg'

Also, ensure that config/database.yml is configured to use the postgresql adapter. You should see code similar to:


default: &default
adapter: postgresql
encoding: unicode
# For details on connection pooling, see Rails configuration guide
# http://guides.rubyonrails.org/configuring.html#database-pooling
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

Now, run:


rake db:setup

Tagged:

Share this article: http://dominicmliddell.com/ewkzz