title: Material Design Lite and Bootstrap Sticky Footer
body: <p>I am building a site where I use the <a href="http://getbootstrap.com/examples/sticky-footer-navbar/" rel="nofollow">Bootstrap Sticky Footer and Navbar</a>. However, with Google's recent release of the <a href="http://www.getmdl.io/index.html" rel="nofollow">Material Design Lite</a> library, I want to use the cards for a portion of my site. However, as soon as I include the MDL library (just the CSS, no other changes), my sticky footer does something odd. The footer is set to the bottom of the viewport (no matter the height of that window) but then it just sticks there. If I scroll up, it scrolls up as well.</p>
  
  <p>When I actually inspect the footer, body, etc., I see nothing that is affecting the layout from the material design CSS. Something obviously is, but I'm fairly stuck on what it might be. (To see it work, remove the reference to the material-lite.css. Currently it is broken within the snippet.)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    position: relative;
    min-height: 100%;
  }
  body {
    margin-bottom: 60px;
    padding-bottom: 20px;
  }
  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    color: white;
    background-color: black;
  }
  #footer-content {
    margin: 20px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.css" /&gt;
  &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a asp-controller="Home" asp-action="Index" class="navbar-brand"&gt;
          &lt;i class="fa fa-globe fa-lg visible-sm visible-xs"&gt;&lt;/i&gt;
          &lt;i class="fa fa-globe fa-3x hidden-sm hidden-xs"&gt;&lt;/i&gt;
        &lt;/a&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav main-links"&gt;
          &lt;li&gt;&lt;a asp-controller="Home" asp-action="Index"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a asp-controller="Home" asp-action="About"&gt;About&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="container"&gt;
    &lt;img src="http://placekitten.com/300/450" /&gt;
    &lt;br/&gt;
    &lt;img src="http://placekitten.com/300/450" /&gt;
    &lt;br/&gt;
  &lt;/div&gt;
  
  &lt;footer&gt;
    &lt;div class="container"&gt;
      &lt;div id="footer-content" class="pull-right"&gt;
        My Footer
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>