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

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

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
ایجاد منو برای سایت یا وبلاگ با استفاده از CSS
ساخت منوی کشویی با تگ ul li و CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
ایجاد بلاک و تصویر شفاف (Transparent) با استفاده از CSS3

دیدگاه

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

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

Saji

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

من میخوام یه سایت تک صفحه ایی درست کنم الان یه html دارم که یه header داره توی header یه سری تگ های a دارم که لینکشون کردم به آی دی div هام توی صفحه میخوام بدونم وقتی روی دکمه میزنم میره روی div مورد نظرم چطوری باید دکمه رو اکتیو کنم که نشون بده توی کدوم div هستم

منظور سوال دقیقا مشخص نیست! معمولا اینگونه موارد با ترکیب جاوا اسکریپت و فراخوانی تابع با رویداد onclick انجام می شود، نمونه کد مشابه این حالت در حال حاضر در قسمت "شرایط استفاده" سایت در انتهای این صفحه به کار رفته است که می توانید الگوبرداری کنید.

bahman

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

عالی

ali

۱۸:۰۸ ۱۳۹۸/۰۱/۱۸

سلام، برای قالب وردپرس به چه صورته ؟

در کل تفاوتی وجود ندارد چون خروجی قالب در نهایت به صورت HTML است، منتها باید با ساختار و نحوه ویرایش سورس قالب های وردپرس آشنا باشید که مبحثی جدای این آموزش است.

مهرداد

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

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

http://mybook2018.gigfa.com/Mybook/?i=1

قبل از هر چیز باید تکنیک های مربوط به طراحی قالب های واکنش گرا (Responsive) در وب را فرا بگیرید، در مورد مشکل اشاره شده مواردی مانند min-height را با height به صورت صددرصد جایگزین کنید (تست نشده)، به طور مثال:

height: 100%;

سهیل

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

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

ساختار اصلی قالب باید قبل از کدنویسی بر اساس آموزش حاضر طراحی شود، در غیر اینصورت ممکن است حتی موارد جزئی نیز باعث بهم ریخته شدن چارچوب قالب شود، در شرایط فعلی بهتر است قسمت به قسمت کدهای قالبتان را در ساختار جدید درج و با آزمایش و خطا علت مشکلات را پیدا و مورد به مورد رفع کنید.

فرنام

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

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

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

مریم

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

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

حذف شد

لطفا از درج کدهای طولانی خودداری کنید، اینگونه موارد را نمی توان صرفا با داشتن استایل CSS ریشه یابی و حل کرد، در صورت امکان تمام کدهای CSS و HTML را در یک صفحه آنلاین قرار داده، آدرس صفحه را ارسال و چند اسکرین شات از منظورتان تهیه نمائید تا بررسی گردد.

محسن(مبتدی)

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

سلام استاد خسته نباشید
استاد من اول کدهای این قالب رو تا حدودی نوشتم ولی بعدش که کلاسهای فوتر رو از سایت شما به این قالب اضافه کردم فوتر به جای اینکه بچسبه به پایین صفحه اصلی رفته بالای صفحه
کد:

حذف شد

خواهش میکنم اگه کدها رو حذف میکنید حد اقل مشکل رو بگید

چند ایراد در کد شما وجود دارد، در قسمت استایل CSS برای body صرفا استایل تعریف شده، برای html نیز مطابق نمونه کد استایل را تعریف کنید، همچنین کلاس wrapper در استایل تعریف نشده! ، در قسمت کدهای HTML نیز تگ مربوط به کلاس wrapper وجود ندارد!

رسول

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

سلام. خسته نباشید
یه تشکر ویژه به شما بخاطر اموزش هاتون که رایگان در اختیار ما میزارید. لطفا ادامه بدید..
و فوتر وبلاگم طولش کوچیکه اما وقتی وارد یه پستی میشم طول فوتر بزرگ میشه. من نمیخوام فوتر کوچیک باشه باید چیکار بکنم؟؟
و به فایل css هم دسترسی دارم... ممنون

متاسفانه راه حل کوتاهی برای رفع این مشکل وجود ندارد، کدهای HTML و استایل CSS باید به دقت بررسی و کد قالب ویرایش شود که یک فرآیند زمانبر است.

هادی

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

سلام ادمین جان سایت خیلی خوبی داری و خیلی بهم کمک کردی ممنون
الان یه مشکل دارم که داره اذیتم میکنه.
سایتی که دارم طراحی میکنم به صورت زیر هستش

<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 اضافه کنید)، همچنین می توانید سورس قالب ها و نمونه طراحی های مختلف را بررسی و الگوبرداری نمائید.

خودمم

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

سلام خسته نباشید
قالب طوسی زمینه سایت شما به طور کامل چسبیده و هیچ فاصله ای بین آن و کناره های مانیتور وجود نداره ولی مال من از هر چهار طرف یه فاصله ای ایجاد شده.
margin و padding رو هم صفر قرار دادم ولی درست نشد

سلام
margin و padding را برای body با مقدار 0 در نظر بگیرید:

body{
	margin:0px; 
    padding:0px; 
}

امین

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

استاد !!!!
این کد شما برای وقتی که محتوا کمه سازگاره اگه محتوا زیاد بشه یک مقدارش میره تو قسمته فوتر من همون صفحه پیشنمایش شما رو با 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 تکمیل شود!

داوود

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

سلام آقای مهندس؛ وقتتون بخیر
قبل از طرح پرسشم ازتون بخاطر پاسخ به سوالات قبلیم سپاسگزارم.
خیلی ممنونم بخاطر این مثال زیباتون. من هم مثال شما رو اینجوری نوشتم و تو 3 تا مرورگر که تست کردم جواب داد. آیا خوبه؟

.wrapper {
            background-color: darkgray;
            height: auto;
            width: auto;
        }       
        .footer {
            position: absolute;
            width: 100%;
            bottom: 0;
            height: auto;
            background-color: dodgerblue;
            padding: 10px 10px;
        }
<div class="wrapper">
        قسمت اصلی قالب
    </div>
    <div class="footer">
        قسمت فوتر قالب
    </div>

ضمنا میشه یه بار دیگه خاصیت margin رو که به wrapper مقدار 50 داده بودین و در footer همون مقدار رو با منفی داده بودین واضح تر بگین. یعنی برای اینه که دقیقا footer ما بچسبه به wrapper؟؟

سلام
- محدودیتی در روش ایجاد قابلیت های وب (به شرط مختصر نویسی و سازگاری) وجود ندارد!
- زمانی که wrapper ارتفاع کل صفحه را اشغال می کند، قاعدتا برای بلاک footer جایی برای نمایش باقی نمی ماند و باید صفحه به پائین اسکرول شود (تا footer دیده شود)، به همین دلیل با در نظر گرفتن یک مقدار منفی برای margin، بلاک wrapper به اندازه یک footer کاهش ارتفاع می دهد (قبلا گفتیم که margin در ارتفاع و عرض عنصر موثر است!) و در این حالت بلاک footer در یک قاب در کنار wrapper دیده می شود!

حمید

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

سلام
من یه قالب طراحی کردم که تو مرورگرهای اکسپلورر و موزیلا خوب نشون داده میشه ولی تو کروم مشکل داره...
وقتی روی قسمت خالی صفحه کلیک میکنم ارتفاع صفحه حدود 50 پیکسل اضافه میشه که قسمت زیر فوتر سایت قرار میگیره یعنی دیگه فوتر آخرین قسمت صفحه نیست و 50 پیکسل زیرش خالی میشه.
ارتفاع div اصلی صفحه هم بر اساس auto تنظیم شده
از کدهای ریست css هم استفاده کردم ولی درست نشده. لطفا راهنمایم کنین... ممنون

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

مصطفی شربتی

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

سلام
من یه وب سایت طراحی کردم که توی این وبسایت همه اجزا اعم از هدر - فوتر در یک فایل مجزا طراحی شده اند. مثلا فوتر توی یک فایل footer.php قرار گرفته است. حال این دو دایوی که شما فرمودین رو باید در فایل footer.php باید استفاده کنم تا فوتر سایت همیشه به پائین چسبیده بشه.
با تشکر

سلام
ساختار سمت سرور (کدنویسی PHP) کار اهمیتی ندارد، مهم این است که خروجی HTML شما در نهایت مطابق با روال آموزش باشد، به عبارتی اینکه شما در چه فایلی تگ ها را قرار دهید بستگی به ساختار برنامه و کدنویسی شما دارد، در نهایت باید به خروجی HTML دقت کنید.

نخست

قبلی

بعدی

آخر

صفحه 1 از 2

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