آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

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

امروزه طراحی قالب وب (سایت، وبلاگ و...) بدون سر و کار داشتن با استایل نویسی 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>

پیش نمایش

دسته بندی: آموزش کاربردی » CSS

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3
تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر
مخفی کردن عناصر وب با CSS
ساخت منوی کشویی با تگ ul li و CSS

دیدگاه

۲۷ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

emad

۲۱:۵۳ ۱۳۹۳/۱۲/۱۸

الان فوتر سایت شما به نسبت پستهای سایتتون پایین میره منظورم همینه ما چطور بفهمیم عرض صفحه چقدره که فوتر رو بذاریم انتها؟ چون عرض صفحه ممکنه تغییر کنه

این مسئله با آموزش حاضر متفاوت است، زمانی که قالبتان به فرض از سه بخش هدر، محتوا و فوتر تشکیل شده، بلاک بخش فوتر در کدهای HTML در آخرین قسمت درج و با استفاده از خاصیت های CSS میزان height بلاک محتوا به صورت auto تنظیم می شود، به این صورت هرچه که به ارتفاع بلاک محتوا اضافه شود، تاثیری بر بلاک فوتر ندارد!
نکته: احتمالا منظورتان از "عرض صفحه" همان ارتفاع صفحه است؟!

emad

۰۱:۰۶ ۱۳۹۳/۱۲/۱۸

سلام ببخشید اگه صفحه مثل صفحه ی شما اسکرول بشه اونوقت چطور باید فوتر رو به پایین بچسبونیم

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

سعید

۱۷:۲۱ ۱۳۹۳/۱۰/۰۳

اقا خیلی عالی بود...!!!
واقعا دمتون گرم!
زنده باشید ایشالا!

علی

۱۴:۵۱ ۱۳۹۳/۰۲/۲۶

با سلام
و سپاس از سایت بسیار خوبتون
خواستم بدونم چطور میشه قابلیت Select کردن رو از تصاویر قالب برداشت برای مثال لوگوی سایت که یه تصویره میشه سلکتش کرد چطور میشه این قابلیت رو برداشت

سلام
دقیقا متوجه منظورتان از قابلیت انتخاب تصاویر نشدیم، اما اگر منظور حالت انتخاب در دابل کلیک است، باید به جای استفاده از تگ img و درج مستقیم تصویر، از CSS و خاصیت هایی مانند background استفاده کنید.

ناصر

۲۲:۰۴ ۱۳۹۳/۰۲/۱۷

سلام
چطور می شه ساید بار همیشه تا اخر صفحه کشیده بشه حتی اگه توش مطلبی نباشه
سپاس

سلام
توضیح ساده ای ندارد، با استفاده از الگوبرداری از نمونه های زیر می توانید این حالت را ایجاد کنید:

http://jsfiddle.net/danield770/3rUG7/3
http://plnkr.co/edit/Z1vTAqeZvst7WEE8j1gv?p=preview

zahra

۱۹:۵۹ ۱۳۹۳/۰۱/۱۶

سلام من در زمینه کار با فتوشاپ ضعیف هستم میخوام باکس جستجو که کنارش عکس ذره بین باشه رو با فتوشاپ طراحی کنم ممنون میشم راهنمایی کنید فقط طراحی با فتوشاپ رو مشکل دارم. ممنون. منتظرم

سلام
دوست گرامی زمینه فعالیت سایت در خصوص وب و برنامه نویسی است، در مورد فتوشاپ لطفا به سایت های طراحی و گرافیک مراجه کنید.

vahid

۱۳:۰۸ ۱۳۹۲/۱۲/۲۴

با سلام
من یه مشکل دارم این که وقتی اطلاعات Div وسطم زیاد میشه از صفحه میزنه بیرون و تنظیمات فوترم بهم میخوره چطوری میتونم Div رو یکجور تنظیم کنم که هر چقدر اطلاعاتم زیاد شد Div ام بزرگ بشه اندازه متن
مرسی

سلام
هرچند ارائه راهکار دقیق نیازمند بررسی سورس کدها است، اما با مقداردهی در استایل CSS به صورت auto این نوع مشکلات رفع می شود.

محمد

۱۲:۰۷ ۱۳۹۲/۱۰/۱۳

چجورى مى تونم رنگش رو عوض كنم؟

باید با CSS آشنا باشید.

ali gh

۰۷:۵۹ ۱۳۹۲/۰۸/۱۰

ممنون بابت آموزش خوبتون .
اما با یک راه آسون تر هم میتوانید این مشکل را حل کنید.
با استفاده از position : relative
برای top :
bottom : -x
برای foot :
top : -x

سپاس فراوان از مشارکت شما.

farzan

۱۷:۳۵ ۱۳۹۲/۰۵/۲۰

با سلام و عرض ادب
لطفا یک راهنمایی در مورد فایل css reset بفرمایید.
اینکه لزوم استفادش و نوع و انتخابش و....
خییییلی ممنون.

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

amirhossein

۲۱:۱۶ ۱۳۹۲/۰۴/۱۵

سلام یه سوال داشتم شاید شما هم تا حالا توجه نکرده باشید امیدوارم بتونید جوابم رو بدید
من یه سایدبار درست کردم اینم کدش

<div class="sidebar">
<div class="sidebar-body">
سلام به همه سلام به همه سلام به همه
</div></div>
<style type="text/css">
.sidebar{height:200px;transition:all 5s;-moz-transition:all 5s;-webkit-transition:all 5s;}
.sidebar:hover{height:auto;transition:all 5s;-moz-transition:all 5s;-webkit-transition:all 5s;}
.sidebar-body{display:none;}
.sidebar:hover .sidebar-body{display:block;}
</style>

دقت کنید تو کد ها از تگ transition استفاده شده اما کار نمیکنه میخوام به سایدبار به صورت افکتی باز و بسته بشه
------------------------------
اما اگه تو همین کد های بالا قسمت

.sidebar:hover{height:auto;}

ارتفاش بجای auto مقدار عدد تعیین بشه transition عمل میکنه و همانطور که من میخوام میشه ولی من میخوام auto باشه transition هم عمل کنه و هر چقدر متن داخل سایدبار بادی بود نمایش بده مثلا اگه بجای auto پنجاه پیکسل بزارم شاید متن هام از پنجاه پیکسل بیشتر باشه و اسکرول بده و من نمیخوام اینطوری باشه میخوام auto باشه حیف که نمیشه چرا واقعا چرا؟
لطفا راهنماییم کنید خیلی ممنون میشم یه دنیا

سلام
متاسفتنه قابلیت های CSS3 بعضا آنطور شسته رفته نیست که انتظارش را داریم، در اینجا هم راه حل نسبی استفاده از max-height است، به طور مثال:

.sidebar{
	max-height:20px;
	transition:all 5s;
	-moz-transition:all 5s;
	-webkit-transition:all 5s;
	border:1px solid;
}
.sidebar:hover{
	max-height:999px;
}

در قسمت hover بیشترین حدی که ممکن است بلاک به آن اندازه محتوا داشته باشد را در نظر می گیریم (مقدار فرضی است).
نکته: این روش چندان قابل اتکا نیست، شاید هنوز استفاده از تکنیک های مبتنی بر جاوا اسکریپت بهترین گزینه باشد.

۱۸:۲۹ ۱۳۹۱/۱۲/۲۱

ممنون از زحماتتون

نخست

قبلی

بعدی

آخر

صفحه 2 از 2

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