آموزش نحوه رفع مشکل فاصله فوتر سایت از پایین صفحه با CSS

در این آموزش می خواهیم به یک مشکل اساسی با عنوان مشکل فاصله فوتر سایت از پایین صفحه در طراحی وب خاتمه دهیم.

حتما شما هم متوجه شده اید که وقتی یک سایتی را طراحی و تکمیل می کنید هیچ مشکلی در صفحه اصلی شما که حاوی المان های بسیاری است ، وجود نخواهد داشت.

اما کافیه یک صفحه جدید ایجاد کنید با محتوای کم اون موقع می بینید که فوتر سایت به جای اینکه پایین سایت باشه میاد بالاتر و نظم صفحه رو به هم میزنه.

مشکل دقیقا توی این صفحات پیش میاد. البته لازم به ذکر است که اگه محتوای صفحه اصلیتون هم کم باشه خواهید دید که مشکل فاصله فوتر سایت از پایین صفحه تو صفحه اصلیتون هم پیش میاد!

حالا ما میخواییم با یک روش ساده این مشکل رو حل کنیم و فوتر سایت شما رو به پایین صفحه تون بچسبونیم. بدون اینکه از کارهای غیرمنطقی استفاده کنیم.

خب برای انجام این کار ابتدا کدهای CSS زیر رو به فایل style قالبتون اضافه کنید:

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

خب همونطور که می بینید ما min-height المان body رو برابر ۱۰۰vh گذاشتیم. اگه میخوایید در مورد واحدها در CSS بیشتر بدونید به لینک زیر مراجعه کنید :

CSS Units – W3Schools

البته به زودی در یک مقاله جدید به توضیح این واحدها خواهیم پرداخت.

خب برگردیم به آموزشمون…

بعدش هم که از flex به عنوان display و flex-direction به عنوان تنظیم جهت المان های داخل body استفاده کرده ایم.

توجه : در صورتی که نمی خوایید به تگ body این استایل ها رو بدید میتونید یک تگ div با کلاس مثلا wrapper ایجاد کنید و به اون المان این استایل هارو اعمال کنید.

ایجاد المان spacer جهت رفع مشکل فاصله فوتر سایت

حالا یک المان جدید با کلاس spacer و بدون هیچ محتوایی ایجاد می کنیم و استایل زیر رو براش تعریف میکنیم :

.spacer {
    flex: 1;
}

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

البته توجه داشته باشید این ساختار و ما تست کردیم شما می تونید ساختارهای دیگه ای رو هم بر حسب ساختار قالبتون امتحان کنید و اگر به نتیجه مطلوب تری رسیدین برای ما هم بفرستین تا بررسی کنیم و روش شما رو هم در همین آموزش اضافه کنیم.

در صورتی که سوال یا مشکلی دارید از فرم دیدگاه همین صقحه برای ما ارسال کنید تا در اسرع وقت پاسخگوی سوالات شما باشیم.

موفق و پیروز باشید.