ساخت فوتر و چیدمان کامل یک صفحه واکنش گرا | درس 44 + پروژه درس

درس 44 از دوره آموزش HTML و CSS ارومیا دیزاین

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

خروجی درس؛ یک پوسته مشترک برای کل صفحه

پروژه دو فایل HTML دارد. index.html صفحه کامل با سربرگ، معرفی، کارت ها، راهنمای ارتباط و تمرین است؛ short.html همان پوسته و فوتر را با محتوای کم نشان می دهد. با مقایسه این دو می بینید چرا راه حل مناسب باید هم متن کوتاه و هم متن بلند را پوشش دهد. هدف، صرفا چسباندن یک کادر به پایین نمایشگر نیست؛ محتوا باید بتواند آزادانه رشد کند.

در درس ساخت هدر و بخش معرفی بخش بالای صفحه را ساختیم. این جلسه آن منطق را به پایان صفحه و ساختار کلی گسترش می دهد. پیش نیازهای چیدمان، Flexbox و CSS Grid هستند. فایل پروژه از ابتدا بدون ابزار ساخت و بدون درخواست شبکه اجرا می شود.

footer چه معنایی دارد و کجا قرار می گیرد؟

footer اطلاعات پایانی مربوط به بخش یا صفحه را مشخص می کند. در پروژه، فوتر اصلی پس از main و بیرون آن قرار دارد؛ بنابراین اطلاعات پایانی کل صفحه را دربرمی گیرد. اگر یک footer داخل article قرار دهید، می تواند اطلاعات پایانی همان مقاله باشد. پس هر footer لزوما فوتر سراسری سایت نیست و محل آن در ساختار اهمیت دارد.

<div class="page-shell">
  <header class="site-header">سربرگ و راهبری</header>
  <main class="container" id="main">محتوای اصلی</main>
  <footer class="site-footer">اطلاعات پایانی صفحه</footer>
</div>

سه بخش، فرزند مستقیم page-shell هستند. قواعد ردیف های شبکه را روی همین والد می نویسیم. اگر main را در یک لایه دیگر قرار دهید، آن لایه عضو گرید می شود و باید ساختار را متناسب اصلاح کنید. نام کلاس site-footer اختیاری است، اما تگ footer معنای HTML را فراهم می کند. برای لایه بندی چند بخش، پروژه چیدمان چندستونی را هم مرور کنید.

پایین ماندن فوتر در صفحه کوتاه بدون position: fixed

.page-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.page-shell > * { min-width: 0; }

ردیف اول و سوم با محتوای هدر و فوتر اندازه می گیرند و ردیف میانی فضای باقی مانده را می گیرد. min-height اجازه می دهد پوسته دست کم به اندازه ارتفاع مبنا باشد، اما وقتی محتوا زیاد شد بلندتر شود. در صفحه کوتاه، فوتر پایین می ماند؛ در صفحه بلند، پس از محتوا قرار می گیرد و کاربر با اسکرول به آن می رسد. برای این رفتار، فوتر را از جریان صفحه خارج نمی کنیم.

100vh قبل از 100svh یک مقدار پشتیبان فراهم می کند. در مرورگرهای پشتیبان، svh بر پایه viewport کوچک تعریف می شود و در موبایل می تواند فضای قابل مشاهده با رابط مرورگر باز را مبنا بگیرد. با جمع شدن رابط مرورگر، الزام ندارد همواره دقیقا لبه دیداری جدید را دنبال کند. اگر رفتار پویا لازم باشد، dvh انتخاب دیگری است که باید تغییر اندازه آن هنگام کار با مرورگر را بررسی کنید.

این الگو را گاهی sticky footer می نامند، اما در اینجا position: sticky ننوشته ایم. منظور، پایین ماندن فوتر در صفحه کم محتوا و حرکت طبیعی آن زیر محتوای بلند است. position: fixed معمولا فوتر را به viewport می چسباند و ممکن است روی محتوا بیفتد؛ برای فوتر معمول سایت، بدون نیاز مشخص چنین رفتاری اضافه نکنید.

اطلاعات فوتر را بر اساس نیاز گروه بندی کنید

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

<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <section aria-labelledby="footer-about">
        <h2 id="footer-about">درباره مجموعه</h2>
        <p>توضیح کوتاه و معتبر درباره فعالیت مجموعه.</p>
      </section>
      <nav aria-labelledby="footer-nav">
        <h2 id="footer-nav">دسترسی سریع</h2>
        <ul class="footer-links">
          <li><a href="index.html#services">خدمات</a></li>
          <li><a href="index.html#practice">تمرین</a></li>
        </ul>
      </nav>
      <section aria-labelledby="footer-contact">
        <h2 id="footer-contact">ارتباط</h2>
        <address>راه ارتباطی معتبر مجموعه</address>
      </section>
    </div>
  </div>
</footer>

عنوان های h2 با ساختار صفحه هماهنگ اند و aria-labelledby به همان شناسه ها اشاره می کند. در پروژه، نام راهبری سربرگ با راهبری فوتر فرق دارد تا دو ناحیه قابل تشخیص باشند. address برای اطلاعات ارتباط مربوط به صاحب صفحه یا محتواست؛ آن را صرفا به خاطر ظاهر پیش فرض برای هر متن مکانی استفاده نکنید. font-style: normal در CSS ظاهر کج پیش فرض را در نمونه تغییر می دهد.

ستون های فوتر؛ تک ستون پایه و سه ستون در فضای کافی

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.footer-grid > * { min-width: 0; }

@media (min-width: 800px) {
  .footer-grid {
    grid-template-columns:
      minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

در عرض کم، گروه ها به ترتیب HTML زیر هم قرار می گیرند. از عرض viewport برابر 800px به بالا، سه ستون ایجاد می شود و گروه معرفی سهم کمی بیشتری می گیرد. برای فارسی، جهت rtl ترتیب شروع مسیرهای گرید را با جهت متن هماهنگ می کند. order یا جابه جایی دیداری غیرضروری اضافه نکرده ایم تا مسیر خواندن و Tab قابل پیش بینی بماند.

عدد 800 ویژگی ذاتی فوتر نیست؛ مرز آموزشی همین پروژه است. اگر متن واقعی طولانی تر باشد، قبل از تنگ شدن ستون ها، نقطه تغییر را بازبینی کنید. برای منطق انتخاب مرز، درس مدیا کوئری و نقاط شکست را مرور کنید. صرف نام گوشی یا تبلت دلیل مناسبی برای انتخاب یک عدد ثابت در تمام پروژه ها نیست.

پس زمینه تیره، لینک خوانا و فوکوس مشخص

.site-footer {
  background: #0b253b;
  color: #edf5fa;
  padding-block: 32px 20px;
}

.site-footer a {
  color: #b6ece0;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-block;
  padding-block: 8px;
  overflow-wrap: anywhere;
}

.site-footer a:focus-visible {
  outline: 3px solid #fcd34d;
  outline-offset: 4px;
}

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

برای خوانایی، درس تایپوگرافی و برای رفتار تعامل، درس focus-visible را مرور کنید. هر لینک باید عنوانی توصیفی داشته باشد؛ چند آیکون بدون نام یا تکرار «اینجا کلیک کنید» جای گروه بندی روشن را نمی گیرد. در نمونه، عنوان مقصدها متنی است و همه آن ها مسیر واقعی دارند.

نوار پایانی فوتر با Flexbox

.footer-bottom {
  border-top: 1px solid #466174;
  margin-block-start: 28px;
  padding-block-start: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

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

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

چیدمان کامل؛ یک ظرف مشترک برای تراز بخش ها

هدر و فوتر پس زمینه تمام عرض دارند و محتوای داخلی آن ها در container مشترک قرار می گیرد. main هم از همان ظرف استفاده می کند تا لبه های متن، کارت ها و اطلاعات پایانی هماهنگ بمانند. تغییر بی دلیل max-width یا فاصله کناری هر بخش، صفحه را ناهماهنگ می کند. فاصله داخل فوتر با padding و فاصله میان ستون ها با gap تنظیم می شود.

برای تفاوت فاصله ها، مدل جعبه CSS را مرور کنید. برای هدر و معرفی هم پروژه درس 43 راهنمای تکمیلی است. پروژه این جلسه یک جمع بندی کاربردی از همین تصمیم هاست؛ لازم نیست همه اجزا با یک ابزار چیدمان ساخته شوند، کافی است نقش هر والد روشن باشد.

عیب یابی؛ چرا فوتر روی محتوا می افتد؟

اول position: fixed یا absolute و ارتفاع ثابت پوسته را بررسی کنید. اگر فوتر از جریان خارج شده باشد، محتوای اصلی ممکن است فضای آن را در نظر نگیرد. اگر height ثابت گذاشته باشید، متن بلند می تواند از کادر بیرون بزند. در این پروژه از min-height استفاده کرده ایم و فوتر در ردیف عادی گرید است؛ اضافه کردن متن باید صفحه را بلندتر کند.

اگر اسکرول افقی ایجاد شد، رشته بدون فاصله، عرض ثابت فرزندان و حداقل اندازه خودکار را بررسی کنید. min-width: 0 و overflow-wrap در جای مناسب کمک می کنند، اما پنهان کردن سرریز کل body درمان عمومی نیست. درس overflow به پیدا کردن عامل واقعی کمک می کند. آدرس طولانی، عنوان گروه و لینک تازه را هم در آزمایش وارد کنید.

تمرین مستقل و پاسخ درس 44

در بخش practice پروژه، فهرست لینک ها در حالت پایه ستونی است. آن را از عرض حداقل 640px ردیفی و چندخطی کنید. قواعد display و فاصله از قبل در فایل اصلی وجود دارند، پس فقط تغییر لازم را بنویسید. پاسخ در solution.css جداست و در حالت اولیه فعال نیست.

@media (min-width: 640px) {
  .practice-links {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

برای فعال کردن پاسخ، خط زیر را بعد از style.css در head قرار دهید. سپس در 639 و 640 پیکسل نتیجه را مقایسه کنید. متن یک لینک را بلندتر کنید و مطمئن شوید گروه در صورت نیاز به خط بعد می رود.

<link rel="stylesheet" href="solution.css">

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

هر دو فایل index.html و short.html را باز کنید. در صفحه کم محتوا و viewport بلند، ردیف میانی باید فضای خالی را بگیرد؛ اگر ارتفاع خود هدر و فوتر و متن از صفحه بیشتر شد، اسکرول طبیعی است. در صفحه کامل، فوتر باید بعد از تمام محتوا دیده شود و روی کارت ها قرار نگیرد. این تفاوت را با حذف یا اضافه کردن چند پاراگراف مشاهده کنید.

عرض های 320، 799، 800 و 1280 پیکسل را بررسی کنید. متن معرفی فوتر را سه برابر و بزرگ نمایی را 200 درصد کنید؛ ارتفاع فوتر باید رشد کند و چیزی بریده نشود. با Tab از سربرگ تا آخرین لینک فوتر حرکت کنید. لینک های بین دو فایل و مقصدهای درون صفحه را هم امتحان کنید تا طراحی ظاهری، مسیرهای ناقص را پنهان نکند.

پرسش های متداول

آیا footer همیشه فوتر اصلی سایت است؟

خیر؛ به ساختار اطراف خود مربوط است. در این پروژه بیرون main قرار دارد و اطلاعات پایانی صفحه را نمایش می دهد.

برای پایین ماندن فوتر باید fixed بگذاریم؟

در این الگو خیر؛ پوسته گرید با min-height و ردیف میانی منعطف، فوتر را در صفحه کوتاه پایین نگه می دارد و در صفحه بلند زیر محتوا می برد.

چرا min-height به جای height نوشته ایم؟

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

آیا فوتر در موبایل اطلاعات را حذف می کند؟

خیر؛ گروه ها به یک ستون تبدیل می شوند و متن و لینک ها باقی می مانند.

ZIP چه فایل هایی دارد؟

صفحه کامل، صفحه کم محتوا، CSS اصلی، solution.css، راهنمای آزمایش و فایل های محلی یکان بخ داخل آن هستند.

منابع تکمیلی: مستند footer در MDN و الگوی پایین ماندن فوتر در صفحه کم محتوا.

درس بعدی: متغیرهای CSS و ساخت سیستم رنگ و اندازه | درس 45