Refactored wrapper structure to allow variable-sized sticky footer

material/base.html

@@ -36,7 +36,7 @@
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
       <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
       <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-e74c14d4c7.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-ca351710b4.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-535e87ca3f.palette.css">
       {% endif %}
@@ -124,7 +124,7 @@
           <script src="https://cdn.mathjax.org/{{ path }}"></script>
         {% endif %}
       {% endfor %}
-      <script src="{{ base_url }}/assets/javascripts/application-d61fcbb674.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-e2d270ac30.js"></script>
       <script>
         /* Configuration for application */
         var config = {

src/assets/javascripts/application.js

@@ -95,6 +95,7 @@ export default class Application {
     }
 
     /* Component: sidebar container */
+    if (!Modernizr.csscalc)
       new Material.Event.MatchMedia("(min-width: 960px)",
         new Material.Event.Listener(window, [
           "resize", "orientationchange"

src/assets/javascripts/components/Material/Sidebar/Container.js

@@ -52,11 +52,8 @@ export default class Container {
    * Update minimum height
    */
   update() {
-    const height = window.innerHeight - this.parent_.offsetTop
-    const margin = this.parent_.offsetHeight - this.el_.offsetHeight
-
-    /* Set new minimum height */
-    this.el_.style.minHeight = `${height - margin}px`
+    const height = this.parent_.offsetHeight - this.el_.offsetTop
+    this.el_.style.minHeight = `${height}px`
   }
 
   /**

src/assets/javascripts/components/Material/Sidebar/Position.js

@@ -37,12 +37,9 @@ export default class Position {
       ? document.querySelector(el)
       : el
 
-    /* Retrieve inner and outer container */
-    this.inner_ = this.el_.parentNode
-    this.outer_ = this.el_.parentNode.parentNode
-
-    /* Initialize top offset and current height */
-    this.offset_ = this.outer_.offsetTop
+    /* Initialize parent container, top offset and current height */
+    this.parent_ = this.el_.parentNode
+    this.offset_ = this.el_.offsetTop - this.parent_.offsetTop
     this.height_ = 0
   }
 
@@ -55,29 +52,35 @@ export default class Position {
 
   /**
    * Update locked state and height
+   *
+   * The inner height of the window (= the visible area) is the maximum
+   * possible height for the stretching sidebar. This height must be deducted
+   * by the top offset of the parent container, which accounts for the fixed
+   * header, setting the baseline. Depending on the page y-offset, the top
+   * offset of the sidebar must be taken into account, as well as the case
+   * where the window is scrolled beyond the sidebar container.
    */
   update() {
-    const scroll = window.pageYOffset
-    const expand = window.innerHeight
+    const offset  = window.pageYOffset
+    const visible = window.innerHeight
 
     /* Calculate bounds of sidebar container  */
     this.bounds_ = {
-      top: this.inner_.offsetTop,
-      bottom: this.inner_.offsetTop + this.inner_.offsetHeight
+      top: this.parent_.offsetTop,
+      bottom: this.parent_.offsetTop + this.parent_.offsetHeight
     }
 
     /* Calculate new offset and height */
-    const offset = this.bounds_.top - scroll
-    const height = expand
-                 - Math.max(0, scroll + expand - this.bounds_.bottom)
-                 - Math.max(offset, this.offset_)
+    const height = visible - this.bounds_.top
+                 - Math.max(0, this.offset_ - offset)
+                 - Math.max(0, offset + visible - this.bounds_.bottom)
 
     /* If height changed, update element */
     if (height !== this.height_)
       this.el_.style.height = `${this.height_ = height}px`
 
     /* Sidebar should be locked, as we're below parent offset */
-    if (offset < this.offset_) {
+    if (offset >= this.offset_) {
       if (this.el_.dataset.mdState !== "lock")
         this.el_.dataset.mdState = "lock"
 

src/assets/stylesheets/layout/_base.scss

@@ -44,7 +44,7 @@ html {
 // Stretch body to container and leave room for footer.
 body {
   position: relative;
-  min-height: 100%;
+  height: 100%;
 
   // [tablet portrait -]: Lock body to disable scroll bubbling
   @include break-to-device(tablet portrait) {
@@ -78,15 +78,30 @@ hr {
   overflow: auto;
 }
 
-// Add top spacing to acount for header
-.md-main {
-  margin-top: 5.6rem;
+// Content wrapper - use display: table for to make variable-sized sticky
+// footers work and fixed table-layout for IE
+.md-container {
+  display: table;
+  width: 100%;
+  height: 100%;
+  table-layout: fixed;
+}
 
-  // Bottom spacing to account for header and footer
+// The main content should stretch to maximum height in the table
+.md-main {
+  display: table-row;
+  height: 100%;
+
+  // Top-spacing to account for header and some additional padding
   &__inner {
-    margin-top: 2.4rem + 0.6rem;
-    margin-bottom: 9.2rem;
+    margin-top: 5.6rem;
+    padding-top: 2.4rem + 0.6rem;
     overflow: auto;
+
+    // If the browser supports calc(), no JavaScript is necessary
+    .csscalc & {
+      min-height: calc(100% - #{5.6rem - 3.0rem});
+    }
   }
 }
 

src/assets/stylesheets/layout/_footer.scss

@@ -26,8 +26,6 @@
 
 // Application footer
 .md-footer {
-  position: absolute;
-  bottom: 0;
   width: 100%;
 
   // Hide for print