toom1996/frontend_v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(layout): 页脚黑底铺满视口，文字保留原缩进

Browse Source 
body 上的 px/py 会向内缩进子元素，页脚因此四周露白边。
用等量负边距让黑底贴到视口边缘，再在内层把缩进补回来
（移动 20+20=40 → px-10；桌面 50+40=90 → md:px-[90px]），
文字位置与改动前完全一致。
This commit is contained in:
toom1996
2026-10-25 00:42:52 +08:00
parent 0f4301b5c3
commit c1059820de
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/layouts/Layout.astro
View File

@ -273,7 +273,10 @@ const headers = {
<slot /> <slot />
</div> </div>
<footer class="relative z-[1] mt-20 w-full bg-black font-sans text-white"> {/* 黑色页脚要贴到视口左右与底部边缘：body 上有 px-5 py-5 md:px-[50px] md:py-[30px]，
子元素默认会缩进这层 padding；这里用等量负外边距抵消（与上方 marquee 同一手法）。
注意不能加 w-full：width:100% + 负 margin-left 会让右边少 20px，只能靠 auto 宽度撑满。 */}
<footer class="relative z-[1] mt-20 -mx-5 -mb-5 bg-black font-sans text-white md:-mx-[50px] md:-mb-[30px]">
<script> <script>
import { getUser } from "@/lib/auth" import { getUser } from "@/lib/auth"
import type { AuthUser } from "@/lib/auth" import type { AuthUser } from "@/lib/auth"
@ -371,7 +374,10 @@ const headers = {
}) })
</script> </script>
{/* 页脚主体：黑底反白，作为整页收尾（沿用全站直角 / 粗线 / 宽字距语言） */} {/* 页脚主体：黑底反白，作为整页收尾（沿用全站直角 / 粗线 / 宽字距语言） */}
<div class="mx-auto w-full max-w-[1400px] px-5 py-14 md:px-10 md:py-20"> {/* 黑底已用负边距铺到视口边缘，内层补回被抵消的那层缩进，让文字位置与改动前完全一致：
移动端 body 20 + 原 footer 20 = 40 → px-10
桌面 body 50 + 原 footer 40 = 90 → md:px-[90px] */}
<div class="mx-auto w-full max-w-[1400px] px-10 py-14 md:px-[90px] md:py-20">
<div class="grid grid-cols-1 gap-12 md:grid-cols-12 md:gap-8"> <div class="grid grid-cols-1 gap-12 md:grid-cols-12 md:gap-8">
{/* 品牌 */} {/* 品牌 */}