how to put footer at bottom of page css 3 way code example

Example 1: 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 2: how to keep footer bottom of the page css

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

Example 3: how to set the footer at the bottom using css

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

Tags:

Css Example

Related