From e64d90fa290c2949b20b337cb2c52b69bef7f3d9 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 25 Jul 2026 12:00:14 +0000 Subject: [PATCH] Keep the footer on the fold when a page does not fill the screen Scroll to the bottom of a long page, click a top-level sidebar group, and the second click lands you on a section landing page. Those pages are short -- a lede and a few cards -- and the footer was left floating wherever the content happened to stop, with the rail carrying on below it to the bottom of the screen. Measured on tools.html: footer bottom at 571, rail bottom at 913. That is 342px of rail under a detached footer. Nothing in this stylesheet had ever set a minimum height, so a short page has always ended early. It was invisible while the sidebar was sticky, because the rail ended with the content and the two stopped together. Making the rail fixed so it would stop locking at page bottom is what exposed it. Body is now a flex column with a minimum of one viewport, and .layout takes the slack, so the footer is pushed down to the fold on a short page and behaves normally on a long one. The sticky topbar stays the first row; everything fixed -- the rail, the scrim, the modals, the back-to-top -- is out of flow and unaffected. Checked after: short pages report gapBelowFooter=0 with the footer bottom, the rail bottom and the viewport all at the same pixel. Long pages are unchanged. At 1500px the footer starts at 268 where the rail ends; at 900px the drawer is off-canvas and the footer runs full width. The page-bottom scroll fix still holds, with the rail at 58 and its first group at 87. --- web/assets/site.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/web/assets/site.css b/web/assets/site.css index 1ba84b3..5eb53df 100644 --- a/web/assets/site.css +++ b/web/assets/site.css @@ -34,6 +34,17 @@ html:focus-within { scroll-behavior: smooth; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { + /* Column flex so the footer is pushed to the bottom of the viewport on a + page whose content does not fill it. Nothing here set a minimum height + before, so a short page left the footer floating wherever the prose + happened to stop — invisible while the rail was sticky and ended with the + content, obvious once it became fixed and ran to the bottom of the screen + regardless. The short section landing pages are where it shows most. + The fixed and sticky children sit outside this flow, except .topbar, which + is sticky and is meant to be the first row. */ + display: flex; + flex-direction: column; + min-height: 100dvh; font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; @@ -178,6 +189,7 @@ img, svg, video { max-width: 100%; height: auto; } .layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); + flex: 1 0 auto; /* take the slack, so the footer lands on the fold */ } /* the rail is painted on the grid itself, so it runs unbroken from topbar to footer even when the page is taller than the sticky sidebar */