how to set footer at bottom of page css code example

Example 1: why is my footer not at the bottom html

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

//name footer id="footer"

Example 2: how to get my footer to the bottom of the page using css

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Example 3: how to keep footer bottom of the page css

.footerclass {
  background-color: #eeeeee;
  position: fixed;
  top: auto;
  bottom: 0;
  width: 100%;
  display: inline-block;
}