برنامه نویسی

رفع مشکل Sticky Footer با Next.js و TailwindCSS

ek3nk4r 2023-03-30

0 80 خواندن این مطلب 2 دقیقه زمان میبرد

رفع مشکل Sticky Footer با Next.js و TailwindCSS

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

داستان برگشت در مورد استعاره CSS شما

به عنوان یک مهندس نرم افزار آزاد، من همیشه به دنبال راه های جدید و مبتکرانه برای حل مسائل طراحی وب هستم. یکی از مسائلی که اخیراً مرا آزار داده است، مشکل چسبنده پاورقی هنگام استفاده از Next.js با TailwindCSS است. هنگامی که یک وب سایت دارای پاورقی چسبنده است، حتی اگر محتوای صفحه کوتاهتر از ارتفاع صفحه باشد، در پایین صفحه باقی می ماند. با این حال، هنگام استفاده از Next.js با TailwindCSS، پاورقی چسبنده آنطور که انتظار می رود کار نمی کند. بنابراین، من تصمیم گرفتم راه حلی پیدا کنم که این مشکل را برطرف کند و پاورقی چسبنده را با Next.js و TailwindCSS یکپارچه کند.

داستان CSS!

فرمول

این فرمول در وب‌سایت Metaphore زنده می‌شود و این دومین فرمول از آزمایش شروع است.

{/* Main Element */}
<div className="min-h-screen flex flex-col relative pb-20">
  {/* Content here */}
  <div className="mt-auto">
    <div className="footer absolute bottom-0 w-full">
      {/* Footer content here */}
    </div>
  </div>
</div>

استعاره بالا یک عنصر JSX است که می تواند برای رفع مشکل فوتر چسبنده هنگام استفاده از Next.js با TailwindCSS استفاده شود. بیایید نگاهی دقیق تر به نحوه عملکرد آن بیندازیم.

اولین سنگ را قرار دهید

نام این کلاس را اضافه کنید body عنصری که به عنوان کل طرح بندی برنامه شما استفاده می شود.

min-h-screen flex flex-col relative pb-20

این حداقل ارتفاع را تنظیم می کند عنصر تا ارتفاع تمام صفحه (min-h-screen) و a ایجاد می کند flex ظرف با جهت انعطاف پذیر تنظیم شده روی ستون (flex-col) به طوری که محتوای داخل به صورت عمودی روی هم چیده شود. این relative موقعیت برای اجازه دادن به عناصر فرزند نسبت به این ظرف والد استفاده می شود. در نهایت، pb-20 class یک بالشتک 80 پیکسلی به ظرف اضافه می کند.

راه حل

بعد، محتوای صفحه را داریم که در عنصر div با className قرار دارد mt-auto. این mt-auto class برای فشار دادن محتوا به بالای ظرف استفاده می شود، در حالی که فضای باقی مانده در پایین برای فوتر باقی می ماند.

در نهایت، عنصر فوتر را داریم که در عنصر div با className قرار دارد footer absolute bottom-0 w-full. این footer class برای اعمال هر سبک خاص برای فوتر مانند اندازه فونت، رنگ و رنگ پس زمینه استفاده می شود. این absolute موقعیت برای قرار دادن عنصر در پایین ظرف اصلی آن استفاده می شود و bottom-0 کلاس برای اطمینان از هم سطح بودن آن با کف ظرف استفاده می شود. این w-full کلاس برای اطمینان از اینکه عنصر تمام عرض محفظه اصلی خود را پوشش می دهد استفاده می شود.

با استفاده از این کلاس ها در ترکیب مناسب، می توانیم یک پاورقی چسبناک ایجاد کنیم که با Next.js و TailwindCSS یکپارچه کار می کند. این راه حل تضمین می کند که پاورقی در پایین صفحه باقی می ماند، حتی اگر محتوای صفحه کوتاه تر از ارتفاع صفحه باشد.

در نتیجه، مشکل فوتر چسبنده می‌تواند مشکلی ناامیدکننده باشد، اما با استفاده از ترکیب مناسب کلاس‌ها در عنصر JSX، می‌توانیم این مشکل را حل کنیم و یک تجربه کاربری یکپارچه برای بازدیدکنندگان وب‌سایت خود ایجاد کنیم.