title: Sticky Footer Glitch
body: <p>I have created a sticky footer, a footer that hugs the bottom of the window whether or not there is enough content to fill the page. My implementation works well except for one minor issue when rendering in Internet Explorer. If the content fills the page and any of my content divs have an unspecified height, a crack appears beneath the footer. This also happens if the content contains a span with or without a fixed height. </p>
  
  <p>Below is my implementation. If I give Div 2 a fixed height the footer tightly hugs the bottom of the window, but by not setting a height the crack appears. I have been unable to resolve this. Any suggestions on how to prevent it would be appreciated.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Sticky Footer&lt;/title&gt;
      &lt;style type="text/css"&gt;
          Html, body {
              margin: 0;
              height: 100%;
              background-color: lightgreen;
          }
          header {
              height: 40px;
              background-color: green;
          }
          footer {
              bottom: 0;
              position: absolute;
              width: 100%;
              height: 40px;
              background-color: gray;       
          }
          .fixedHeightDiv {
              border: 2px;
              border-style: solid;
              height: 500px;
          }
          .container {
              min-height: 100%;
              position: relative;
          }
          .content {
              padding-bottom: 40px;
          }        
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;header&gt;Header&lt;/header&gt;
          &lt;div class="content"&gt;
              &lt;div class="fixedHeightDiv"&gt;
                  Div 1
              &lt;/div&gt;
              &lt;div&gt;
                  Div 2
              &lt;/div&gt;
              &lt;div class="fixedHeightDiv"&gt;
                  Div 3
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;footer&gt;Footer&lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>