karim/OPENBUREAU
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: Sticky-Footer auf allen Seiten — Body von Grid auf Flex-Spalte

Browse Source 
Nicht-Home-Seiten nutzten ein Grid-Sticky-Layout, das den Footer durch die
zusätzliche Breadcrumb-Zeile (impliziter Grid-Row) nicht zuverlässig unten
hielt. Body jetzt durchgehend Flex-Spalte wie Home: min-height:100dvh,
main flex:1 → Footer klebt unten. Inhaltsspalte (72ch + 1.75rem Gutter) per
max-width/margin-inline zentriert, Header/Footer volle Breite (eigenes inneres
Raster zentriert deren Inhalt), Full-Bleed-Hero rechnet sich weiter korrekt aus.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
karim
2026-06-01 05:21:12 +02:00
parent f82214719a
commit 309d12f8a2
1 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+18 -21
View File
@@ -90,28 +90,25 @@ body {
line-height: 1.55; line-height: 1.55;
padding: 0; padding: 0;
margin: 0; margin: 0;
min-height: 100vh; /* Flex-Spalte → STICKY FOOTER auf allen Seiten: main wächst (flex:1), Footer
/* overflow-x + scrollbar-gutter liegen jetzt auf html (Wurzel) → Body füllt behält Inhaltshöhe und klebt unten. (overflow-x + scrollbar-gutter: html.) */
konsistent die gleiche Breite auf allen Seiten. */ min-height: 100dvh;
/* nur Zeilen-Abstand (Header/Main/Footer); KEIN Spalten-Gap, sonst entstehen display: flex;
ungleiche Ränder an der Inhaltsspalte (der „weiße Spalt"). */ flex-direction: column;
row-gap: var(--spacing-sm);
column-gap: 0;
display: grid;
grid-template-rows: auto 1fr auto;
justify-content: stretch;
/* Boxed content column = 72ch with 1.75rem gutters, side columns absorb the rest */
grid-template-columns:
1fr
min(var(--container-width), 100% - 3.5rem)
1fr;
} }
/* Default: every direct body child sits in the content column */ /* Inhaltsspalte zentrieren = 72ch + 1.75rem Gutter (Home ist Vollbreite).
body > * { grid-column: 2; } Header/Footer bleiben volle Breite (eigenes inneres Raster zentriert sie). */
/* Opt-in: full-bleed children break out edge-to-edge */ body:not(.is-home) > main,
body > .full-bleed, body:not(.is-home) > .page-foot-nav {
body > header.site-header, width: 100%;
body > footer { grid-column: 1 / -1; } max-width: calc(var(--container-width) + 3.5rem);
margin-inline: auto;
padding-inline: 1.75rem;
}
body:not(.is-home) > main { flex: 1 0 auto; } /* füllt → Footer unten */
body:not(.is-home) > header.site-header,
body:not(.is-home) > .page-foot-nav,
body:not(.is-home) > footer { flex: none; }
p { margin: var(--spacing-sm) 0; } p { margin: var(--spacing-sm) 0; }