مشکل پایین بودن فوتر وقتی یک صفحه وب حاوی میزان کمی از محتوا باشد، پانویس صفحه بجای قرار گرفتن در پایین صفحه بالاتر قرار می گیرد و میزانی فضای خالی زیر خود بوجود می آورد. که این امر باعث زشتی ظاهر سایت می شود، در بسیاری از موارد از طراحان خواسته می شود که این پانویس را پایین صفحه نگه دارند، ولی چگونگی انجام این کار چندان شفاف و روشن نیست.
مشکل نماندن فوتر در پایین صفحه
روشی که در زیر خواهیم دید، با استفاده از CSS های معتبر برای تمامی مرورگر های بروز، این مشکل را بسادگی برطرف می کند، البته لازم بذکر است که این روش در مرورگرهای قدیمی شکست می خورد. مشاهده دموی آنلاین: View my demo with the footer at the bottom

ویژگی های اصلی این روش

  • سازگاری با تمامی مرورگرهای بروز و استاندارد

    مرورگرهای سازگار: سافاری، فایرفاکس، اینترنت اکسپلورر ۷و۶و ۵.۵ وبالا، اپرا و نت اسکیپ ۸

  • بدون استفاده از جاوا اسکریپت

  • استفاده از کدهای استاندارد CSS

    css های بکار رفته ۱۰۰٪ معتبر و سازگار هستند

شیوه عمل

تنها مواد لازم برای رفع این مشکل HTML و CSS است

کد HTML

```
<h2>
کد <em>CSS</em>
</h2>

html,
body {
margin:0;
padding:0;
height:100%;
}

container {

min-height:100%;
position:relative;
}

header {

background:#ff0;
padding:10px;
}

body {

padding:10px;
padding-bottom:60px; /* Height of the footer */
}

footer {

position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}

کد ساده زیر را نیز می توانید برای سازگاری با IE 6 و 5.5 اضافه کنید.

container {

height:100%;
}


<small>
این متن ترجمه بدی بود از مطلب اصلی که می توانید در منابع ببینید :)
</small>