Не могу прикрепить футер к низу страницы

Есть ли какая-нибудь возможность прикрепить футер к низу страницы, не изменяя разметку контейнера и мейна.

На данный момент пробовал все что умею и знаю:

  1. менял позицию футера на relative, absolute, fixed. Последнее свойство помогает, но я не хочу видеть футер всегда. Только в внизу, после последнего контейнера.
  2. перетаскивал футер за пределы мейна и обратно. Тоже без особого результата.
@charset "UTF-8"; @import url('https://fonts.googleapis.com/css?family=Montserrat|Nunito+Sans|Roboto&display=swap'); * {   margin: 0;   padding: 0;   -webkit-box-sizing: border-box;   box-sizing: border-box; }  html {   scroll-behavior: smooth;   word-wrap: break-word; }  html, body, header, main {   height: 100%; }  body {   width: 100%;   font-family: Roboto, Verdana, sans-serif;   font-size: 1em;   background-image: url(../images/extra_clean_paper.png);   background-repeat: repeat; }  header {   text-align: center;   background-color: yellow; }  #hero-header {   position: relative;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   -ms-transform: translate(-50%, -50%);   transform: translate(-50%, -50%); }  #nav {   text-align: center;   background-color: dimgray;   z-index: 2; }  main:not {   max-width: 960px;   margin: 0 auto; }  .container {   background-color: #eeeeee;   border: 1px solid red;   border-radius: 5px;   clear: both;   overflow: hidden;   margin-top: 1em;   min-height: 100%;   padding: 3.125em 0.625em;   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);   box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); }  .aboutme .col-40 {   margin-top: 1em;   padding-left: 1em;   padding-right: 1em;   width: 39%; }  .aboutme .col-60 {   margin-top: 1em;   padding-left: 1em;   padding-right: 1em;   width: 59%; }  .left {   float: left; }  .right {   float: right; }  .table {   display: table;   border-collapse: collapse;   table-layout: fixed; }  .hobbies .table-row {   display: table-row;   border-bottom: 0.1em solid darkgrey; }  .hobbies .table-row:last-child {   border: 0; }  .hobbies .table-cell {   display: table-cell;   padding-left: 1em;   padding-right: 1em;   vertical-align: middle;   text-align: center;   width: 50%; }  .portfolio .col-50 {   margin-top: 1em;   padding-left: 1em;   padding-right: 1em;   width: 49%; }  .projects .flex-row {   display: flex;   flex-wrap: wrap;   width: 100%;   padding-right: 15px;   padding-left: 15px;   margin-right: auto;   margin-left: auto; }  .projects .col-33 {   position: relative;   width: 100%;   max-width: 33%;   -ms-flex: 0 0 33%;   -webkit-box-flex: 0;   -webkit-flex: 0 0 33%;   flex: 0 0 33%; }  .projects .services-box {   background: #f9f9f9;   padding: 10px;   margin: 20px 5px 0 5px; }  footer {   background: red;   height: 50px;   width: 100%;   position: relative;   bottom: 0; }
<header id="link-hero-page">   <div id="hero-header">   </div> </header> <nav>   <ul id="nav">   </ul> </nav> <main>   <section id="link-main" class="aboutme container">     <div class="col-40 left">     </div>     <article class="col-60 right">     </article>   </section>   <section id="link-hobbies" class="hobbies container">     <div class="table">       <div class="table-row">         <article class="table-cell">         </article>       </div>       <div class="table-row">         <div class="table-cell">         </div>         <article class="table-cell">         </article>       </div>       <div class="table-row">         <article class="table-cell">         </article>       </div>     </div>   </section>   <section id="link-portfolio" class="portfolio container">     <article class="col-50 left">     </article>     <article class="col-50 right">     </article>   </section>   <section id="link-projects" class="projects container">     <div class="flex-row">       <div class="col-33">         <article class="services-box">         </article>       </div>       <div class="col-33">         <article class="services-box">         </article>       </div>       <div class="col-33">         <article class="services-box">         </article>       </div>     </div>   </section>   <section id="link-contacts" class="contacts container">    </section> </main> <!--FOOTER--> <footer>   <address> 				<p style="text-align: center;">LOREM LOREM LOREM LOREM LOREM</p> 			</address> </footer>

https://jsfiddle.net/0gxpakuo/