درس 44؛ فوتر و چیدمان کامل صفحه واکنش گرا
ZIP را استخراج و index.html را باز کنید؛ اینترنت و نصب لازم نیست. short.html همان پوسته را با متن کم دارد.
پوسته سه فرزند مستقیم header، main و footer دارد؛ ردیف ها auto 1fr auto هستند. min-height و نه height ثابت، اجازه رشد محتوا را می دهد.
در 320، 799، 800 و 1280px آزمایش کنید. فوتر زیر 800px یک ستون و از 800px سه ستون دارد. متن درباره پروژه را سه برابر کنید و بزرگ نمایی 200 درصد را بررسی کنید. با Tab لینک های سربرگ و فوتر را دنبال کنید.
در short.html و viewport بلند، فوتر پایین می ماند؛ اگر خود محتوا و فوتر بلندتر از viewport باشند، صفحه باید اسکرول شود. فوتر fixed یا absolute نیست.
تمرین: practice-links از 640px ردیفی و چندخطی شود. پاسخ با افزودن این خط بعد از style.css در head فعال می شود:
<link rel="stylesheet" href="solution.css">
برای پاسخ، 639 و 640px را مقایسه کنید. همه لینک های بین دو فایل را آزمایش کنید. اطلاعات تماس ساختگی در پروژه نیست.
