Stick footer to bottom of page

Used flexbox strategy outlined here https://css-tricks.com/couple-takes-sticky-footer/
pulibrary · Oct 9, 2023 · 728e7d9 · 728e7d9
1 parent fe84651
commit 728e7d9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -13,11 +13,28 @@
  *= require_tree .
  *= require_self
  */
+
+html, body, div.lux {
+  height: 100%;
+}
+
 body {
     margin: 0;
 }
 
+/* wraps main content to make lux work */
+/* styled to ensure sticky footer */
+div.lux {
+  display: flex;
+  flex-direction: column;
+}
+
+.homepage-img {
+  margin-top: 1em;
+}
+
 #main-content {
+  flex: 1 0 auto; /* part of the sticky footer setup */
   margin: 20px 20px;
   /* ensure content stays within boundaries of header / footer, which have
    * default max-width of 1170, see
@@ -27,6 +44,10 @@ body {
   padding: 0 calc(calc(calc(100% - 1170px) / 2));
 }
 
+.lux-library-footer {
+  flex-shrink: 0; /* part of sticky footer */
+}
+
 #list_header {
     color: orange
 }

diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
@@ -1,5 +1,5 @@
 <td>
-<%= image_tag("cardcatalog.gif", alt: "card catalog image") %>
+<%= image_tag("cardcatalog.gif", class: "homepage-img", alt: "card catalog image") %>
 <td>
 
 <p>This dictionary catalog contains records for items cataloged before 1980.</p>