title: Footer moves strangely at Edge
body: <p>It is my HTML &amp; Javascript code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>footer {
      background-color: #049e8c;
      width: 100%;
      height: 50pt;
      text-align: right;
      margin-top: auto;
      bottom: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;footer id="footer"&gt;
      &lt;div id="" class=""&gt;
          &lt;a href="#"&gt;hoge&lt;/a&gt;
          &lt;a href="#"&gt;hoge&lt;/a&gt;
      &lt;/div&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>"Javascript"</p>
  
  <p><a href="https://blog.webcreativepark.net/2007/11/16-012253.html" rel="nofollow noreferrer">Jscode</a></p>
  
  <p>I want Edge to be like this</p>
  
  <p><a href="https://i.stack.imgur.com/C1fln.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C1fln.png" alt="Edge"></a><a href="https://i.stack.imgur.com/A0E7k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A0E7k.png" alt="chrome"></a></p>
  
  <p>Edge does not fit on the screen. Also, footer stops on the spot.</p>
  
  <p>I tried both Javascript and CSS but it didn't work on Edge when there is no element at the bottom of the screen. I want to be at the bottom of the page when there are more elements than the screen.</p>