منظور از چسباندن فوتر به انتهای قالب
قبل از اینکه وارد مباحث کدنویسی و نوشتن استایل CSS شویم، بد نیست یادآوری کنیم که منظور از این تکنیک چیست؟
به طور خلاصه و در شرایط عادی، هنگامی که ارتفاع قالبمان از ارتفاع صفحه نمایش کوچکتر است، مرورگر به صورت پیش فرض قالب (و فوتر آن را) به بالاترین حد ممکن هدایت کرده و از انتهای صفحه نمایش فاصله می گیرد، این موضوع در حالتی که بخواهید فوتر همواره به پائین صفحه چسبیده باشد مشکل زا خواهد بود.
کدنویسی HTML و CSS
برای استفاده از این تکنیک در هنگام طراحی قالب، کافی است مراحل زیر را دنبال کنید.
ابتدا طرح کلی قالبمان باید از دو بلاک div تشکیل شده باشد، یک بلاک به عنوان قسمت اصلی و یک بلاک به عنوان فوتر قالب، به مثال زیر توجه کنید.
<div class="wrapper">
قسمت اصلی قالب
</div>
<div class="footer">
قسمت فوتر قالب
</div>
سپس در استایل CSS قالبمان موارد زیر را تعریف می کنیم.
<style type="text/css">
html, body{
height:100%;
}
.wrapper{
min-height:100%;
height:auto;
margin:0px auto -50px auto;
}
.footer{
height:50px;
}
</style>
همان طور که ملاحظه می کنید جهت کشیده شدن ارتفاع قالب به اندازه ارتفاع صفحه نمایش، برای تگ html و body مقادیر %100 (خاصیت height) در نظر می گیریم، برای دو بلاک wrapper و footer نیز مطابق نمونه کدها را تعریف می کنیم، نکته قابل توجه در اینجا اندازه margin است که در بلاک wrapper (برای تعیین فاصله انتهای بلاک از عناصر مجاور)، برابر با ارتفاع بلاک footer در نظر گرفته می شود تا فوتر ما کاملا به انتهای صفحه بچسبد، البته در صورت لزوم می توان این مقادیر را تغییر داد و متناسب با طرح دلخواه خود تنظیم نمود.
مثال و پیش نمایش آنلان
در زیر مثال و پیش نمایش آنلاینی از تکنیک فوق را بررسی می کنیم.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | تکنیک هدایت فوتر به پائین صفحه</title>
<!-- http://webgoo.ir -->
<style type="text/css">
html, body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
margin:0px;
padding:0px;
height:100%;
}
.wrapper{
min-height:100%;
height:auto;
margin:0px auto -50px auto;
background-color:#F0F0F0;
}
.footer{
width:100%;
height:50px;
background-color:#369;
color:#FFF;
}
hr{
border:0px;
border-bottom:1px dashed #CCC;
}
</style>
</head>
<body>
<div class="wrapper">
قسمت اصلی قالب
<hr>
</div>
<div class="footer">
قسمت فوتر قالب
<hr>
نکته: این روش با تمام مرورگرهای استاندارد سازگار است (شامل مرورگر قدیمی و غیر استاندارد IE 6 نیز می شود).
</div>
</body>
</html>