diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css
index fe81fa3fbd..c73ba6ff50 100644
--- a/dist/framework-with-theme.css
+++ b/dist/framework-with-theme.css
@@ -129,10 +129,10 @@ main > * {
 
 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
    Note: For these to work, content must come after both bars in the markup */
-.bar ~ main {
+.bar-header ~ main {
   top: 50px; }
 
-.bar ~ main {
+.has-footer {
   bottom: 50px; }
 
 /* Bar docked to bottom used for primary app navigation */
diff --git a/example/footers.html b/example/footers.html
index 04f09ff8ce..2748bd7743 100644
--- a/example/footers.html
+++ b/example/footers.html
@@ -17,10 +17,85 @@
         <h1 class="title">Footers</h1>
       </header>
 
-      <main>
-
+      <main class="content-padded has-footer">
+        <p>Footer should always stay at the bottom of the screen, and on top of the main content.
+        <ul>
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+          <li>asdf
+        </ul>
+        <p>Bottom of the list
       </main>
 
+      <footer class="bar bar-footer bar-dark">
+        <h3 class="title"> Me footer </h3>
+      </footer>
+
     </section>
 
   </body>
diff --git a/scss/framework/structure/_bar.scss b/scss/framework/structure/_bar.scss
index 4ddb6cef51..7b85f4ebb4 100644
--- a/scss/framework/structure/_bar.scss
+++ b/scss/framework/structure/_bar.scss
@@ -75,9 +75,11 @@
 
 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
    Note: For these to work, content must come after both bars in the markup */
-.bar ~ main {
+.bar-header ~ main {
   top: $barHeight;
 }
-.bar ~ main {
+
+.has-footer {
   bottom: $barHeight;
 }
+