blyzer/dtf-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: the footer stays at the bottom of the screen on short pages
All checks were successful
Build and deploy / Validate source (push) Successful in 7s
Details
Build and deploy / Integration suite on a real stack (push) Successful in 2m51s
Details
Build and deploy / Secret scan and release gate (push) Successful in 9s
Details
Build and deploy / Publish images (push) Successful in 56s
Details

Browse Source 
On a short page (sign-in, an empty cart) the footer followed the content
and the rest of the screen was left blank below it, more so with the Site
drawn at 80%. The body is now a column at least the screen's height with
the footer pushed to its end; under the 80% zoom that height is 125vh,
because the zoom scales viewport units too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cauê Faleiros
2026-09-30 17:12:55 -03:00
parent 24ee4e9eab
commit 0b86fe79fc
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/site-shell.css
View File

@@ -78,3 +78,7 @@ footer a:hover{color:var(--laranja2)}
@media(max-width:720px){.fcont{margin-left:0;text-align:left}} @media(max-width:720px){.fcont{margin-left:0;text-align:left}}
.fbase{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex; .fbase{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex;
justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#5A6570} justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#5A6570}
/* The footer sits at the bottom of the screen even when the page is short. */
body{display:flex;flex-direction:column;min-height:100vh}
body>footer{margin-top:auto}

5
web/site-v2.css
View File

@@ -488,5 +488,6 @@ html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-te
/* On a computer the Site is drawn at 80%: the sizes above were chosen looking /* On a computer the Site is drawn at 80%: the sizes above were chosen looking
at it that way, and at 100% everything felt too big. Phones and tablets at it that way, and at 100% everything felt too big. Phones and tablets
keep their own sizes. */ keep their own sizes. The zoom scales viewport units too, so the page's
@media (min-width:1100px){html{zoom:.8}} full height is 125vh there (site-shell.css keeps the footer at the bottom). */
@media (min-width:1100px){html{zoom:.8}body{min-height:125vh}}