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

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

عکس زیر رو ببینید تا کامل مشکلی رو که توضیح دادم درک کنید.

جالبه بدونین که توی طراحی بلاگ پول ریکوئست هم به این مشکل برخوردم و برای حاشیه راه نسبتا ساده به ذهنم رسید. توی گروه تلگرامی دیگران داشتن در مورد فلکس باکس و جاوااسکریپت صحبت میکردن. درسته فلکس باکس میتونه این مشکل رو حل کنه اما مشکلش اینه که ساپورتش برای همه مرورگرها کامل نیست. کنترل این موضوع با جاوااسکریپت هم خیلی Overkill هست و تلاش برای بهایی ناچیزه.

راه حل

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

<html>
 <!-- ... -->
  <body>
    <div class="wrapper">
      <!-- All Website Content -->
    </div>
    <footer class="footer"></footer>
  </body>
</html>

خب برای اینکه فوتر همیشه پایین محتوا باشه باید با Absolute Positioning اون رو محدود کنیم.

* {
  box-sizing: border-box; // اگر این خط رو اعمال نکنید این روش کار نمیکنه
}
html {
  height: 100%;
}
body {
  padding-bottom: 56px; // هم اندازه ارتفاع فوتر
  position: relative;
  min-height: 100%; // برای اینکه فوتر، حتی زمانی که محتوای کافی توی صفحه نداریم،‌پایین صفحه باقی بمونه
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px // دقت کنید این اندازه باید با پدینگ پایین body یکسان باشه
}

برای اینکه احساس واقعی ای ازین تکنیک داشته باشید،‌این کد ها روی توی کدپن قرار دادم تا بتونین دموی زیر رو ببینید. در ضمن این راه حل مشکلی با ریسپانسیو لی اوت نداره و به خودی خود ریسپانسیو هست.

https://codepen.io/farskid/pen/JWZzaO

مشکل راهی که گفتیم چیه؟

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

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

توی این راه از Table Layout در CSS استفاده کرده تا بتونه کل کانتینر وب سایت و فوتر رو دو سطر متوالی و جدا از هم در یه جدول درنظر بگیره. چون ماهیت فوتر در این روش از جنس سطر جدوله، به اندازه محتوا بزرگ میشه و نیازی نیس ارتفاع دقیقش رو بدونیم.

دقت کنید که مارک آپ HTML رو به table تغییر ندید. فقط کافیه شبکه بندی با جدول رو با استفاده از CSS شبیه سازی کنیم.

<div class="wrapper">

</div>
<div class="footer">
    <div>
        I am a flexible sticky footer.
        <br>
        Feel free to change my height.
    </div>
</div>

html, body {
    height: 100%;
}
body{
    min-height: 100%;
}
body {
    display: table;
    width: 100%;
    height: 100%;
}
.wrapper{
    background-color: green;
}
.footer, .wrapper {
    display: table-row;
}
.footer {
    height: 1px;
}

.footer {
    background: #e5e5e5;
}
.footer>div{
    padding: 10px;
    text-align: center;
}

اینم یه دموی لایو از خلاقیتی که سعید انجام داده:

http://codepen.io/saeedalipoor/pen/EWJovr/