ID

22a504a

date

2024-07-15 08:14:48+00:00

author

Alex Chan <alex@alexwlchan.net>

parent

7ad5113

message

Use flex, not grid -- this fixes an issue when you resize

Steps to reproduce:

1. Open the page in a tabbed browser
2. Tear off the tab into a new window
3. Notice the extra white space which has appeared at the bottom
   of the page

changed files

1 file, 7 additions, 3 deletions

• index.html

Changed files

index.html (1556) → index.html (1586)

diff --git a/index.html b/index.html
index fe1a470..76f1ef5 100644
--- a/index.html
+++ b/index.html
@@ -26,9 +26,13 @@
       margin:  0;
       padding: 0;
 
-      min-height: 100vh;
-      display:    grid;
-      grid-template-rows: auto 1fr auto;
+      min-height:     100vh;
+      display:        flex;
+      flex-direction: column;
+    }
+
+    main {
+      flex: 1;
     }
 
     header > *, main, footer > * {