lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

优化：页脚贴紧浏览器底部（sticky footer）

Browse Source 
- body 改为 flex flex-col
- content 包裹在 flex-1 容器中，撑满剩余高度
- footer 使用 mt-auto 始终贴在页面最底部
This commit is contained in:
流星
2026-02-27 02:08:21 +08:00
parent 8325f01c06
commit 6a0f11b893
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/layouts/app.blade.php
+13 -4
View File
@@ -45,7 +45,7 @@
@yield('head') @yield('head')
</head> </head>
<body class="bg-gray-100 min-h-screen text-gray-800 text-sm @yield('body-class')" @yield('body-data')> <body class="bg-gray-100 min-h-screen text-gray-800 text-sm flex flex-col @yield('body-class')" @yield('body-data')>
{{-- ═══════════ 顶部导航栏（统一风格） ═══════════ --}} {{-- ═══════════ 顶部导航栏（统一风格） ═══════════ --}}
<header class="bg-indigo-900 border-b border-indigo-800 text-white shadow-md sticky top-0 z-50 shrink-0"> <header class="bg-indigo-900 border-b border-indigo-800 text-white shadow-md sticky top-0 z-50 shrink-0">
@@ -140,14 +140,23 @@
@endif @endif
{{-- ═══════════ 页面主体内容 ═══════════ --}} {{-- ═══════════ 页面主体内容 ═══════════ --}}
@yield('content') <div class="flex-1">
@yield('content')
</div>
{{-- ═══════════ 底部页脚（版权信息） ═══════════ --}} {{-- ═══════════ 底部页脚（版权信息） ═══════════ --}}
<footer class="mt-16 border-t border-gray-200 bg-white"> @php
/* 取第一个房间的创建年份作为网站创建时间 */
$siteStartYear = \App\Models\Room::min('created_at')
? \Carbon\Carbon::parse(\App\Models\Room::min('created_at'))->year
: date('Y');
$copyrightYear = $siteStartYear == date('Y') ? $siteStartYear : $siteStartYear . ' – ' . date('Y');
@endphp
<footer class="border-t border-gray-200 bg-white mt-auto">
<div <div
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-gray-400"> class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-gray-400">
<span>© {{ date('Y') }} <span class="font-semibold text-gray-500">飘落流星聊天室</span>. All rights <span>© {{ $copyrightYear }} <span class="font-semibold text-gray-500">飘落流星聊天室</span>. All rights
reserved.</span> reserved.</span>
<span class="flex items-center gap-3"> <span class="flex items-center gap-3">
<span>Powered by <span class="font-medium text-indigo-500">Laravel 12</span> · <span <span>Powered by <span class="font-medium text-indigo-500">Laravel 12</span> · <span