شیوه ساخت فوتر ثابت

نوشین خستو ۱۳ تیر ۱۳۹۵

در این مقاله آموزشی سعی داریم تا یک تکنولوژی جدید و کاربردی را در حوزه طراحی سایت بررسی کنیم. استفاده از این تکنولوژی، فوترهایی امن و مطمئن را برای ما تضمین خواهد کرد. بدین صورت که با وجود هر میزان محتوای سایت، فوتر ما در پایین صفحه وب‌سایت به صورت ثابت قرار خواهد گرفت.

در هنگامی‌که مشغول طراحی وب سایت خود هستید، ممکن است با مشکلی همانند آنچه در تصویر زیر مشاهده می‌کنید مواجه شوید.

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

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

تکنیک

در طراحی سایت جهت جلوگیری از مشکلی که در بالا اشاره شد، می‌توان از تکنولوژی فلکس باکس که ابزاری فوق پیشرفته در CSS3 است و برای تطبیق لایه‌ها بکار برده‌می‌شود، بهره گرفت.

صفحه نمایش ما، شامل هدر، بخش اصلی و فوتر می‌باشد.

در متن پایین،کدهای html نشان داده شده‌اند که هیچ چیز فوق‌العاده‌ و اضافه‌ای در آن‌ها وجود ندارد.

<body>
 <header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>

جهت فعال کردن تکنولوژی فلکس باکس کافی است برای body دستور display:flex را قرار دهید و flex-direction را به مقدار column تغییر دهید ( به صورت پیش‌فرض مقدار آن row است که یک لایه افقی است.) از طرفی دیگر، هم برای تگ html و هم برای تگ body می‌بایست height را برابر 100% قرار دهیم، با این‌کار کل صفحه نمایشی ما به لحاظ عمودی پر می‌شود.

html{
 height: 100%;
}
body{
 display: flex;
 flex-direction: column;
 height: 100%;
}

حال وقت آن است که تنظیمات لازم را جهت تعیین میزان فضای اشغالی برای هر بخش مشخص کنیم. ما این‌کار را می‌توانیم به کمک ویژگی‌های تعریف شده برای فلکس‌باکس انجام دهیم.

این سه مشخصه برای فلکس باکس را می‌توان باهم و به صورت یک دستور نوشت:

Flex-grow: مشخص می‌کند چه میزان از فضای خالی آزاد در container برای یک عنصر اختصاص داده شود.

Flex-shrink: مشخص می‌کند در زمانی‌که فضای کافی برای تمامی عناصر وجود ندارد، یک عنصر به چه میزان کوچک شود.

Flex-basis: اندازه پیش‌فرض برای یک عنصر.

ما انتظار داریم تا بخش هدر و فوتر وب‌سایت ما تنها به میزانی که نیاز دارند، فضا اشغال کنند و باقی فضای موجود برای محتوای اصلی سایت ما ذخیره شود.

دستورات CSS مربوط به لایه‌های فوق‌الذکر همانند دستورات زیر خواهد بود:

header{
 /* We want the header to have a static height,
 it will always take up just as much space as it needs.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
 flex: 0 0 auto;
}
.main-content{
 /* By setting flex-grow to 1, the main content will take up
all of the remaining space on the page.
 The other elements have flex-grow: 0 and won't contest the free space. */
 /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
 flex: 1 0 auto;
}
footer{
 /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
 flex: 0 0 auto;
}

برای آنکه نحوه عملکرد این تکنولوژی را ببینید کافی است بر روی دکمه دمو که در پایین مقاله قرار گرفته‌است، کلیک نمایید.

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

نتیجه‌گیری

همان‌طور که مشاهده می‌کنید تکنولوژی فلکس باکس در حوزه طراحی سایت بسیار قدرتمند ظاهر شده‌است. تمامی مرورگرهای شناخته‌شده و مرسوم آن را پشتیبانی می‌کنند. البته استثناء کوچکی نیز وجود دارد و آن این است که این ویژگی در مرورگرهای IE9 به بالا بصورت امن اجرا خواهد شد.