بهترین مرجع مقالات تخصصی طراحی وب

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

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

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

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

در فیض آن، از آنجایی که محتوای کافی برای هدایت فوتر به ذیل برگه تارنما نیست، فوتر در میانه کاغذ قرار خواهد گرفت و خلأ متعددی در زیر کاغذ و در ذیل فوتر بوجود خواهد آمد.

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

کاغذ اکران ما، دربرگیرنده هدر، نصیب مهم و فوتر می باشد.

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

...

...

...

جهت فعال کردن تکنولوژی فلکس جعبه کافی میباشد برای 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 به بالا بصورت امن اجرا شود.