Add flexbox layout to position the footer

7 years ago · 49afda0b29
parent 1a559b03a5
commit 49afda0b29
2 changed files with 9 additions and 3 deletions
--- a/apps/explorer_web/assets/css/_layout.scss
+++ b/apps/explorer_web/assets/css/_layout.scss
@ -1,3 +1,9 @@
-main {
-  min-height: calc(100vh - 9.9rem);
+.layout-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  main {
+    flex-grow: 1;
+  }
 }
--- a/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex
@ -9,7 +9,7 @@
  </head>

  <body>
-    <div>
+    <div class="layout-container">
      <%= render ExplorerWeb.LayoutView, "_topnav.html", assigns %>
      <main class="mt-3">
        <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>