asked on

footer not at bottom of page

How do I make the footer stay at bottom and why does the code at least show the 1em margin-top for the footer in order to separate it from the aside and article elements? Thank you.

<!DOCTYPE HTML>
<HTML>
      <HEAD>
            <link rel="stylesheet" type="text/css" href="stylesheet.css" />
      </HEAD>

      <BODY>


      <header>header</header>

      <aside>aside</aside>

      <article>article</article>

      <footer>footer</footer>


      </BODY>
</HTML>

//////////////////////////////////////////////////////////////////////////////////////////////////

html{
      height: 100vh;
}

body{
      border: 2px solid black;
      height: 100%;
}

header {
      width: 100%;
      height: 100px;
      background-color: gray;
      margin-bottom: 1em;
}

aside{
      width: 250px;
      height: 300px;
      background-color: blue;
      float: left;
}

article{
      width: 250px;
      height: 300px;
      background-color: red;
      float: right;
}

footer{
      width: 100%;
      height: 100px;
      background-color: gray;
      clear: both;
      bottom: 0;
      margin-top: 1em;
}