article

چسبیدن فوتر قالب به پائین صفحه با CSS

css-sticky-footer

امروزه طراحی قالب وب (سایت، وبلاگ و...) بدون سر و کار داشتن با استایل نویسی CSS امری تقریبا غیر قابل تصور است، از این گذشته حتی آنهایی که در این باره تجربه اندکی دارند نیز به خوبی واقف هستند که صرف آشنایی با خاصیت ها و کارکردهای عادی کدهای CSS، جوابگوی تمام نیازها و ایده های طراح قالب نخواهد بود، از این رو همیشه مواردی پیش می آید که پا را از قواعد ساده CSS فراتر گذاشته و با تکنیک های ویژه آن کار کنیم، به هر صورت با ذکر این مقدمه در این آموزش می خواهیم یک تکنیک جالب در طراحی وب را با هم مرور کنیم و آن آشنایی با نحوه به اصطلاح چسباندن فوتر قالب به پائین صفحه با CSS است.

منظور از چسباندن فوتر به انتهای قالب


قبل از اینکه وارد مباحث کدنویسی و نوشتن استایل CSS شویم، بد نیست یادآوری کنیم که منظور از این تکنیک چیست؟
به طور خلاصه و در شرایط عادی، هنگامی که ارتفاع قالبمان از ارتفاع صفحه نمایش کوچکتر است، مرورگر به صورت پیش فرض قالب (و فوتر آن را) به بالاترین حد ممکن هدایت کرده و از انتهای صفحه نمایش فاصله می گیرد، این موضوع در حالتی که بخواهید فوتر همواره به پائین صفحه چسبیده باشد مشکل زا خواهد بود.

کدنویسی HTML و CSS


برای استفاده از این تکنیک در هنگام طراحی قالب، کافی است مراحل زیر را دنبال کنید.
ابتدا طرح کلی قالبمان باید از دو بلاک div تشکیل شده باشد، یک بلاک به عنوان قسمت اصلی و یک بلاک به عنوان فوتر قالب، به مثال زیر توجه کنید.
<div class="wrapper">
قسمت اصلی قالب
</div>
<div class="footer">
قسمت فوتر قالب
</div>
سپس در استایل CSS قالبمان موارد زیر را تعریف می کنیم.
<style type="text/css">
html, body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    margin:0;
    padding:0;
    height:100%;
}
.wrapper{
    min-height:100%;
    height:auto;
    margin:0 auto -50px auto;
    background-color:#F0F0F0;    
}
.footer, .wrapper:after{
    width:100%;
    height:50px;
    background-color:#369;
    color:#FFF;
}
.wrapper:after{
    content:"";
    display:block;
    background-color:#F0F0F0;
}
hr{
    border:0;
    border-bottom:1px dashed #CCC;
}
</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>
<!-- https://webgoo.ir -->
<style type="text/css">
html, body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    margin:0;
    padding:0;
    height:100%;
}
.wrapper{
    min-height:100%;
    height:auto;
    margin:0 auto -50px auto;
    background-color:#F0F0F0;    
}
.footer, .wrapper:after{
    width:100%;
    height:50px;
    background-color:#369;
    color:#FFF;
}
.wrapper:after{
    content:"";
    display:block;
    background-color:#F0F0F0;
}
hr{
    border:0;
    border-bottom:1px dashed #CCC;
}
</style>
</head>
<body>
<div class="wrapper">
قسمت اصلی قالب
<hr>
محتوای قالب را در این قسمت درج کنید.
</div>
<div class="footer">
قسمت فوتر قالب
<hr>
نکته: این روش با تمام مرورگرهای استاندارد سازگار است (شامل مرورگر قدیمی و غیر استاندارد IE 6 نیز می شود).
</div>
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
» ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
» آموزش استفاده از فونت فارسی در وب با CSS
» ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
» تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
commentنظرات (۲۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: امین
۱۸:۴۱ ۱۳۹۴/۰۹/۳۰
استاد !!!!
این کد شما برای وقتی که محتوا کمه سازگاره اگه محتوا زیاد بشه یک مقدارش میره تو قسمته فوتر من همون صفحه پیشنمایش شما رو با inspect element چند تا تگ br و متن بهش اضافه کردم رفت تو فوتر.
اینطوری اگه بنویسی درست میشه البته با درصد نوشتم:
.wrapper
{
min-height:90%;
height: auto;
margin-bottom:-10%;
}
#footer
{
border: 0 solid #000;
text-align: center;
height:10%;
background: url(ch01_007i.gif) top repeat-x;
margin-top:10%;
}
البته ارتفاع پیکسل مانیتورها فرق داره برای همین نمیشه پیکسل درست حسابی زد... مگر با media@
پاسخ: 
این الگو صرفا بنای اولیه یک قالب است و نباید در قسمت wrapper (پوشش یا لفاف) به صورت مستقیم متن درج کنید، این طرح باید با اضافه کردن بلاک های میانی (در بخش wrapper) و استفاده از خاصیت هایی مانند margin تکمیل شود!
نویسنده: خودمم
۱۱:۴۷ ۱۳۹۴/۱۰/۳۰
سلام خسته نباشید
قالب طوسی زمینه سایت شما به طور کامل چسبیده و هیچ فاصله ای بین آن و کناره های مانیتور وجود نداره ولی مال من از هر چهار طرف یه فاصله ای ایجاد شده.
margin و padding رو هم صفر قرار دادم ولی درست نشد
پاسخ: 
سلام
margin و padding را برای body با مقدار 0 در نظر بگیرید:
body{
margin:0px;
padding:0px;
}
نویسنده: هادی
۱۸:۲۳ ۱۳۹۴/۱۱/۲۲
سلام ادمین جان سایت خیلی خوبی داری و خیلی بهم کمک کردی ممنون
الان یه مشکل دارم که داره اذیتم میکنه.
سایتی که دارم طراحی میکنم به صورت زیر هستش
<html>
<head></head>
<body>
<div id="header"></div>
<div id="main">
<div id="boxRight"></div>
<div id="content"></div>
<div id="boxLeft"></div>
</div>
<div id="footer"></div>
</body>
</html>
ارتفاع boxRight و boxLeft از اندازه ارتفاع صفحه بیشتر هستند
بسته به نیاز با echo کردن قسمتی از تگ ها رو در content چاپ میکنم.
در مواقعی که محتوا کم باشه و ارتفاع content از ارتفاع صفحه کمتر باشه ارتفاع main به اندازه boxRight و boxLeft نیست و به اندازه ارتفاع content میشه در این صورت فوتر میاد بالا و روی boxRight و boxLeft قرار میگیره در صورتی که ارتفاع main باید به اندازه ارتفاع boxRight و boxLeft از ارتفاع صفحه بیشتره بشه تا فوتر در انتهای main قرار بگیره و نیاد روی boxRight و boxLeft .
آیا راهی وجود داره که بشه باهاش در صورتی که ارتفاع content از ارتفاع boxRight و boxLeft کمتر بود در اینصورت ارتفاع main برابر ارتفاع boxRight و boxLeft بشه؟
پاسخ: 
هرچند بدون دیدن سورس استایل ها نمی توان پاسخ قطعی داد، اما معمولا با استفاده از یک بلاک با خاصیت clear و مقدار both می توان این موارد را حل کرد (بلاک را قبل از بسته شدن تگ main اضافه کنید)، همچنین می توانید سورس قالب ها و نمونه طراحی های مختلف را بررسی و الگوبرداری نمائید.
نویسنده: رسول
۱۷:۴۰ ۱۳۹۵/۰۴/۱۱
سلام. خسته نباشید
یه تشکر ویژه به شما بخاطر اموزش هاتون که رایگان در اختیار ما میزارید. لطفا ادامه بدید..
و فوتر وبلاگم طولش کوچیکه اما وقتی وارد یه پستی میشم طول فوتر بزرگ میشه. من نمیخوام فوتر کوچیک باشه باید چیکار بکنم؟؟
و به فایل css هم دسترسی دارم... ممنون
پاسخ: 
متاسفانه راه حل کوتاهی برای رفع این مشکل وجود ندارد، کدهای HTML و استایل CSS باید به دقت بررسی و کد قالب ویرایش شود که یک فرآیند زمانبر است.
نویسنده: محسن(مبتدی)
۰۰:۰۵ ۱۳۹۵/۰۷/۱۴
سلام استاد خسته نباشید
استاد من اول کدهای این قالب رو تا حدودی نوشتم ولی بعدش که کلاسهای فوتر رو از سایت شما به این قالب اضافه کردم فوتر به جای اینکه بچسبه به پایین صفحه اصلی رفته بالای صفحه
کد:
حذف شد
خواهش میکنم اگه کدها رو حذف میکنید حد اقل مشکل رو بگید
پاسخ: 
چند ایراد در کد شما وجود دارد، در قسمت استایل CSS برای body صرفا استایل تعریف شده، برای html نیز مطابق نمونه کد استایل را تعریف کنید، همچنین کلاس wrapper در استایل تعریف نشده! ، در قسمت کدهای HTML نیز تگ مربوط به کلاس wrapper وجود ندارد!
نویسنده: مریم
۱۹:۲۹ ۱۳۹۶/۰۱/۲۰
استاد خسته نباشید من چند روز دیگه حتما باید این قالب وردپرس رو تکمیل کنم تقریبا 70 هشتاد درصد راهو رفتم فقط این آخری نمیدونم مشکلش چیه من میخوام قسمت فوتر دقیقا بچسبه به بدنه قالب
حذف شد
پاسخ: 
لطفا از درج کدهای طولانی خودداری کنید، اینگونه موارد را نمی توان صرفا با داشتن استایل CSS ریشه یابی و حل کرد، در صورت امکان تمام کدهای CSS و HTML را در یک صفحه آنلاین قرار داده، آدرس صفحه را ارسال و چند اسکرین شات از منظورتان تهیه نمائید تا بررسی گردد.
نویسنده: فرنام
۰۳:۳۰ ۱۳۹۶/۰۴/۲۴
ممنون، ولی بهتر بود فقط و فقط اون تکه کدایی که برای حل این مشکل بود رو می نوشتین و بقیه کدایی که ربطی به رفع این مشکل و موضوع مطلب نداشت و فقط برای سفارشی کردن بود رو نمیذاشتین.
الان من خودم گیج شدم، چون این کدا رو که اضافه کردم قالب وبسایتم بهم خورده و مورد نظر من نیست و من نمیدونم کدوم از کدا ربطی نداره به این مشکل و کدوما داره و باید تک تک امتحان کنم تا بفهمم، البته به غیر از رنگ پس زمینه و راست چین کردنو و ... که معلومه ربطی ندارن.
پاسخ: 
این شیوه طراحی به شکلی نیست که مستقیم و به راحتی در سایت کد آن را درج کنید، باید طراحی قالب شما از پایه سازگار با این حالت طراحی شود، در واقع این آموزش بیشتر مربوط به طراحی ساختار و مبنای طراحی قالب است، برای قالب موجود ممکن است به راحتی قابل اعمال نباشد، باید در یک محیط آزمایشی کد قالبتان را به شیوه آموزش داده شده تغییر دهید و با آزمایش و خطا کد نهایی را بدست آورید.
نویسنده: سهیل
۱۸:۵۱ ۱۳۹۶/۰۶/۰۱
سلام من این کاری رو که گفتید کردم اما چون من یه قالب رو در حال طراحی بودم و الان فقط بخش فوترش مونده بود و به این مشکل خوردم دستوراتی رو که گفتید وارد میکنم کل صفحه به هم میریزه
پاسخ: 
ساختار اصلی قالب باید قبل از کدنویسی بر اساس آموزش حاضر طراحی شود، در غیر اینصورت ممکن است حتی موارد جزئی نیز باعث بهم ریخته شدن چارچوب قالب شود، در شرایط فعلی بهتر است قسمت به قسمت کدهای قالبتان را در ساختار جدید درج و با آزمایش و خطا علت مشکلات را پیدا و مورد به مورد رفع کنید.
نویسنده: مهرداد
۱۷:۴۱ ۱۳۹۷/۰۴/۱۶
با سلام و خسته نباشید
اول از همه تشکر میکنم از شما که اموزش های خوبی در اختیار ما میزارید .
بنده سوالی که داشتم و هفت ماه میشه درگیرم کرده اینه که من یه صفحه html طراحی کردم میخوام تو هر مدل گوشی که صفحه باز میشه اجزای داخل صفحه صد در صد نشون داده بشه یعنی مثلا ارتفاع گوشی من مثلا 600 هستش کل صفحه بدون اسکرول و درشت نشون داده میشه ولی گوشی دوستم که مثلا 900 هستش تا نصف صفحه نشون میده از شما خواهش میکنم نگاه کنین و کمکم کنید ممنونم اینم صفحه
http://mybook2018.gigfa.com/Mybook/?i=1
پاسخ: 
قبل از هر چیز باید تکنیک های مربوط به طراحی قالب های واکنش گرا (Responsive) در وب را فرا بگیرید، در مورد مشکل اشاره شده مواردی مانند min-height را با height به صورت صددرصد جایگزین کنید (تست نشده)، به طور مثال:
height: 100%;
نویسنده: ali
۱۸:۰۸ ۱۳۹۸/۰۱/۱۸
سلام، برای قالب وردپرس به چه صورته ؟
پاسخ: 
در کل تفاوتی وجود ندارد چون خروجی قالب در نهایت به صورت HTML است، منتها باید با ساختار و نحوه ویرایش سورس قالب های وردپرس آشنا باشید که مبحثی جدای این آموزش است.
نویسنده: bahman
۲۲:۱۵ ۱۳۹۸/۰۵/۲۳
عالی
نویسنده: Saji
۱۵:۲۳ ۱۳۹۸/۱۱/۱۶
من میخوام یه سایت تک صفحه ایی درست کنم الان یه html دارم که یه header داره توی header یه سری تگ های a دارم که لینکشون کردم به آی دی div هام توی صفحه میخوام بدونم وقتی روی دکمه میزنم میره روی div مورد نظرم چطوری باید دکمه رو اکتیو کنم که نشون بده توی کدوم div هستم
پاسخ: 
منظور سوال دقیقا مشخص نیست! معمولا اینگونه موارد با ترکیب جاوا اسکریپت و فراخوانی تابع با رویداد onclick انجام می شود، نمونه کد مشابه این حالت در حال حاضر در قسمت "شرایط استفاده" سایت در انتهای این صفحه به کار رفته است که می توانید الگوبرداری کنید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





2 × 1
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.