diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index e6fe48290e..3b35ad5326 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -275,9 +275,13 @@ ion-infinite-scroll.active .scroll-infinite {
   bottom: $bar-height;
 }
 
-// Specify that a content area will have tabs
-.has-tabs {
-  bottom: 49px;
+.has-tabs,
+.bar-footer.has-tabs {
+  bottom: $tabs-height;
+}
+
+.has-footer.has-tabs {
+  bottom: $tabs-height + $bar-height;
 }
 
 // A full screen section with a solid background
diff --git a/test/html/footers.html b/test/html/footers.html
index 452a369208..5374c1d238 100644
--- a/test/html/footers.html
+++ b/test/html/footers.html
@@ -4,9 +4,6 @@
     <title>Footers</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <link href="../../dist/css/ionic.css" rel="stylesheet">
-    <style>
-      .hide{display:none;}
-    </style>
   </head>
   <body>
 
@@ -17,43 +14,68 @@
     <main class="content padding has-header has-footer">
       <p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
       <p>Content element must have "has-footer" as a classname.</p>
-      <p><button id="btnAddMore">Dynamically Add More Content</button></p>
-      <div id="add-more"></div>
-      <p><button id="btnToggle">Toggle Content</button></p>
-      <p id="toggle-content" class="hide">
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
-        Toggled content<br>
+      <p>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
       </p>
       <p><a class="button button-secondary" href="./">All CSS Tests</a></p>
     </main>
 
-    <footer class="bar bar-footer bar-default">
+    <footer class="bar bar-footer bar-positive">
       <h3 class="title">Footer</h3>
     </footer>
 
diff --git a/test/html/tab-with-footer.html b/test/html/tab-with-footer.html
new file mode 100644
index 0000000000..4e0caa30c4
--- /dev/null
+++ b/test/html/tab-with-footer.html
@@ -0,0 +1,106 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Tab with a Footer</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link href="../../dist/css/ionic.css" rel="stylesheet">
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Tab with a Footer</h1>
+    </header>
+
+    <main class="content padding has-header has-footer has-tabs">
+      <p>Example of a tab that also has a footer inside of it</p>
+      <p>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+      </p>
+      <p><a class="button button-secondary" href="./">All CSS Tests</a></p>
+    </main>
+
+    <footer class="bar bar-footer bar-stable has-tabs">
+      <h3 class="title">Footer</h3>
+    </footer>
+
+    <nav class="tabs tabs-icon-bottom tabs-positive">
+      <a class="tab-item" href="#">
+        Fun
+        <i class="icon ion-game-controller-a"></i>
+      </a>
+      <a class="tab-item">
+        Security
+        <i class="icon ion-locked"></i>
+      </a>
+      <a class="tab-item">
+        Simple
+        <i class="icon ion-heart"></i>
+      </a>
+      <a class="tab-item has-badge">
+        Light
+        <i class="badge">3</i>
+        <i class="icon ion-leaf"></i>
+      </a>
+      <a class="tab-item">
+        Clean
+        <i class="icon ion-waterdrop"></i>
+      </a>
+    </nav>
+
+  </body>
+</html>
