Detach the footer from the content. Works also on mobile devices

templates/main.html

@@ -86,12 +86,12 @@
 {% block footer %}
   {% if not current_user.is_anonymous %}
     {% set version_label = 'Version' %}
-    <!-- Use a wrapper div to detach the footer from the content. -->
-    <div style="padding-bottom: 3rem !important; visibility: hidden !important; flex-grow: 1 !important; -ms-flex-direction: column !important; display: flex !important;
+    <!-- Use a wrapper div to detach the footer from the content -> just nice to have -->
+    <div style="padding-bottom: 1rem !important; visibility: hidden !important; flex-grow: 1 !important; -ms-flex-direction: column !important; display: flex !important;
       flex-direction: column !important;">
       .
     </div>
-    <footer class="footer" style="background-image: url(https://eflows4hpc.eu/wp-content/uploads/2021/02/Barra-gris-footer.png) !important; height: auto; color: #575756 !important; background-repeat: no-repeat !important; background-size: cover !important; margin-top: 2rem;">
+    <footer class="footer" style="background-image: url(https://eflows4hpc.eu/wp-content/uploads/2021/02/Barra-gris-footer.png) !important; height: auto; color: #575756 !important; background-repeat: no-repeat !important; background-size: cover !important; margin-top: auto !important;">
         <div class="container p-0" style="padding: 0px !important">
           <div class="p-0 w-100" style="background-image: url(https://eflows4hpc.eu/wp-content/uploads/2021/01/barra-3-color-8.png) !important; width: 100%; height: 15px; background-repeat: no-repeat !important; background-size: cover !important; padding: 0px; !important"></div>
           <div class="row mt-2 px-3" style="margin-top: 0.5rem; padding-right: 1rem;">
@@ -143,6 +143,24 @@
     var csrfToken = '{{ csrf_token() }}';
     $('time[title]').tooltip();
   </script>
+  <!-- Calculate the size of the dynamic footer to make sure that it doesn't cover the content of the page. Helps also on mobile devices. -->
+  <script>
+    function footerAlign() {
+      $('footer').css('display', 'block');
+      $('footer').css('height', 'auto');
+      var footerHeight = $('footer').outerHeight();
+      $('body').css('padding-bottom', footerHeight);
+      $('footer').css('height', footerHeight);
+    }
+    
+    $(document).ready(function(){
+      footerAlign();
+    });
+    
+    $( window ).resize(function() {
+      footerAlign();
+    });
+  </script>
   <!--[if IE ]>
   <script src="{{ url_for_asset('ie.js') }}"></script>
   <![endif]-->