Put footer at the bottom

Previously, when the pages had a height
smaller than the screen's height,
the footer was displayed somewhere in the
middle of the page.

Display the footer at the bottom, with
no whitespace after it.

src/main/webapp/app/layouts/footer/footer.component.html

 <div class="footer">
-<!-- 
+<!--
     <p jhiTranslate="footer">More information can be found <a href="https://sharing-codeability.uibk.ac.at/static/SharingCodeAbility.html">here</a>!</p>
      -->
-    <div class="container-fluid">      
+    <div class="container-fluid">
       <div class="row">
         <div class="col-4">
           <div class="logo-container">
             <img style="padding-left: 25px; padding-top: 15px; float: left;" src="/content/img/logo-footer.png" width="128" height="auto">
-          </div>        
+          </div>
         </div>
-        <div class="col-8">          
+        <div class="col-8">
           <div style="float: left; padding-top: 15px;">
             <ul>
               <li><a href="https://codeability.uibk.ac.at/" jhiTranslate="global.footer.about">About codeAbility</a></li>
             </ul>
           </div>
-          <!-- 
+          <!--
           <div style="float: left; padding-top: 15px;">
             <ul>
               <li><a href="#">About this platform</a></li>
@@ -37,7 +37,7 @@
               <li><a href="https://artemis.codeability.uibk.ac.at/#/datenschutz"  jhiTranslate="global.footer.privacy">Privacy</a></li>
             </ul>
           </div>
-      </div>        
-    </div>     
+      </div>
+    </div>
   </div>
 </div>

src/main/webapp/app/layouts/main/main.component.html

-<!-- codeability bar -->
-<div id="top-space">
-	<img src="/content/img/logo-top.png" alt="codeAbility" width="168px">
-</div>
+<div style="display: flex; flex-direction: column; min-height: 100vh;">
 
-<div>
-	<router-outlet name="navbar"></router-outlet>
-</div>
+    <!-- codeability bar -->
+    <div id="top-space">
+        <img src="/content/img/logo-top.png" alt="codeAbility" width="168px">
+    </div>
 
-<div class="container-fluid">
+    <div>
+        <router-outlet name="navbar"></router-outlet>
+    </div>
 
-    <div class="pagewrapper"></div>
+    <div class="container-fluid">
 
-    <!-- Main content -->
-	<div class="card jh-card">
-		<router-outlet></router-outlet>
-	</div>
+        <div class="pagewrapper"></div>
 
-	<div class="pagewrapper"></div>
+        <!-- Main content -->
+        <div class="card jh-card">
+            <router-outlet></router-outlet>
+        </div>
 
-	<jhi-page-ribbon></jhi-page-ribbon>
-</div>
+        <div class="pagewrapper"></div>
 
-<jhi-footer></jhi-footer>
+        <jhi-page-ribbon></jhi-page-ribbon>
+    </div>
+
+    <jhi-footer style="margin-top:auto"></jhi-footer>
+</div>