نحوه نوشتن فوتر چسبان یا Sticky Footer

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

با جستجو تونستم چندتا راه حل پیدا كنم كه هم با CSS و هم جی كوئری نوشتنش امكان پذیر بود. خلاصه تونستم مشكلم رو حل كنم. چند روز پیش هم یكی از دوستان همین مشكل رو داشت و ازم كمك خواست كه منم راه حل رو بهش گفتم و مشكلش حل شد. فك كردم كه آموزش نوشتنش رو توی وبلاگم بذارم تا شما هم اگر نیاز داشتید ازش استفاده كنید.

برای نوشتن یه فوتر چسبان یا Sticky Footer باید مراحل زیر رو دنبال كنید.

اول باید كل محتواتون رو به جز فوتر توی یه <div> قرار بدید.

<div class="wrap">
    Content
</div>

فرض كنید كه كل كد HTML ما به صورت زیر هست.

<div class="wrap">
    Content
</div>
<div class="footer">
    Sticky Footer
</div>

حالا میریم سراغ كدهای CSS.

*{margin:0;}

body, html, .wrap{
  height:100%;
}

body > .wrap{
  height:auto;
  min-height:100%;
}

.wrap:after {
  content: "";
  display: block;
  height: 100px; 
}

.footer{
  background:#662e8c;
  margin-top:-100px;
  height:100px;
  color:#fff;
  position:relative;
  line-height:180%;
  padding:0 10px;
}

فقط توجه كنید كه فوترتون حتما باید ارتفاع داشته باشه و به اندازه ارتفاع فوترتون باید margin-top رو به صورت منفی مقدار دهی كنید.

دقت كنید كه ارتفاع .wrap:after هم همون مقدار ارتفاع فوتر باید باشه. پس 3 مقدار شبیه به هم داریم.

این روش كلیه نوشتن یه فوتر چسبان هست. دیگه به توانایی خودتون بستگی داره كه چطور از اون روی پروژه مورد نظرتون استفاده كنید :)