بهترین روش برای نمایش همیشگی فوتر در پایین سایت‌های HTML5

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

<div class="page-wrap">
  
  <h1>Sticky Footer</h1>
  <h2>with Fixed Footer Height</h2>
  
  <button id="add">Add Content</button>  
     
</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

آخرین به‌روزرسانی در ۰۴ ارد ۱۳۹۶.

دیدگاه کاربران

  1. امیر در

    سلام
    مطالبتون عالیه ولی اگه یک دمو داشتن بهتر میشد
    ممنون

  2. shobeyr63 در

    مطالبتون عالیه ولی اگر یک دمو داشتن بهتر بود!

  3. سایت خبری در

    بسیار سپاس از شما و مطالب بسیار خوبتون . ممنون

  4. دانلود بازی در

    سلام عالی بود مرسی

دیدگاه خود را بنوبسید