Material Design Lite and Bootstrap Sticky Footer - css

Question

I am building a site where I use the Bootstrap Sticky Footer and Navbar. However, with Google's recent release of the Material Design Lite 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.
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.)
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a asp-controller="Home" asp-action="Index" class="navbar-brand">
<i class="fa fa-globe fa-lg visible-sm visible-xs"></i>
<i class="fa fa-globe fa-3x hidden-sm hidden-xs"></i>
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav main-links">
<li><a asp-controller="Home" asp-action="Index">Home</a>
</li>
<li><a asp-controller="Home" asp-action="About">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="http://placekitten.com/300/450" />
<br/>
<img src="http://placekitten.com/300/450" />
<br/>
</div>
<footer>
<div class="container">
<div id="footer-content" class="pull-right">
My Footer
</div>
</div>
</footer>

Answer 1

I found the correct solution to keeping footer stuck to bottom even if the content of a new tab is a different height.
https://github.com/google/material-design-lite/issues/913
This js fiddle specifically had useful html and css.
http://jsfiddle.net/eggbox/gk7u32b6/
In short add this to your html above the footer
<style>
.mdl-layout__content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.mdl-layout__content > *:not(.mdl-layout-spacer) {
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
</style>
<div class="mdl-layout-spacer"></div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--middle-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer--link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>

Answer 2

This should fix your problem. See plunker
html {
height: auto;
}