PDA

View Full Version : چسبیدن footer با انتهای صفحه


omidparkour
پنج شنبه 12 تیر 1393, 20:59 عصر
سلام
چی باید بکنیم که footer همیشه در انتهای صفحه قرار گرفته باشه؟؟
metal gear solid 4
پنج شنبه 12 تیر 1393, 21:06 عصر
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 45px;
background: #f8f8f8
}
omidparkour
پنج شنبه 12 تیر 1393, 21:09 عصر
من این کد رو زدم اما نشد
metal gear solid 4
پنج شنبه 12 تیر 1393, 21:12 عصر
<div class="footer" ></div>

اگر از تگ های HTML5 استفاده میکنی اون نقطه رو از ابتدای استایل CSS بردار و این رو توی کد HTML بنویس

<footer>SOME HTML HERE</footer>
f_talebi
پنج شنبه 12 تیر 1393, 21:18 عصر
این استایل رو ب فوتر بدین ؟

clear:both
ab.ali
پنج شنبه 12 تیر 1393, 21:19 عصر
من اینو قبلا پرسیدم :




html,body{heightL100%}

footer{position:absolute;
bottom:0px}
2undercover
پنج شنبه 12 تیر 1393, 21:19 عصر
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 45px;
background: #f8f8f8
}


علاوه بر اینکه bottom رو 0 قرار می دهید، مقدار top رو هم auto قرار بدید.
metal gear solid 4
پنج شنبه 12 تیر 1393, 21:22 عصر
علاوه بر اینکه bottom رو 0 قرار می دهید، مقدار top رو هم auto قرار بدید.
مقدار Auto برای زمانیه که قبلاً Top مقدار داشته باشه و بخوایم توی استایل فعلی مقدار قبلی رو تاثیر ندیم!
omidparkour
پنج شنبه 12 تیر 1393, 21:24 عصر
نشده!!!!!!!!!!!!!!!!!!
metal gear solid 4
پنج شنبه 12 تیر 1393, 21:24 عصر
این استایل رو ب فوتر بدین ؟

clear:both

وقتی Position رو از نوع Fixed میدیم دیگه نیازی نیست Clear کنیم. در واقع Position های Fixed و Absolute شناور هستند. وابسته به سایر المان های DOM نیستند. روی سایر تگ ها قرار میگیرن. به همین خاطر خاصیت z-index دارن.


نشده!!!!!!!!!!!!!!!!!!

از اشکالات تایپی مطمئن شید. همچنین مطمئن شید که فایل استایل رو توی صفحه ی HTML تون فراخونی کردید و مشکلی در Load ش ایجاد نشده. شاید مسیر رو اشتباه دادید! کلاس دادن رو هم دقیقاً به صورتی که گفتم انجام بدید.
SA_Developer
پنج شنبه 12 تیر 1393, 21:43 عصر
سلام
البته position روی absolute باشه بهتره چون fixed باعث میشه همیشه فوتر نمایش داده بشه شما میخواید در صورتی که محتویات صفحه کم باشه باز فوتر در پایین صفحه قرار بگیره:

#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
vimax23
پنج شنبه 12 تیر 1393, 21:52 عصر
سلام
چی باید بکنیم که footer همیشه در انتهای صفحه قرار گرفته باشه؟؟

کدهایی که دادن بهت درسته
نکته در پوزیشن همیشه fixed ثابته و absolute متغیر هست همچنین bottom برابر 0
حالا اینکه ارتفاعش چقدر باشه فاصله از چپ و راست چقدر باشه هم کاری نداره
[younes]
پنج شنبه 12 تیر 1393, 22:01 عصر
دوست عزیز شما برای این که فوتر تمام پایین صفحه رو پوشش بده باید فقط margin بادی رو غیر فعال کنی

در فایل سی اس اس به این صورت

body{ margin:0;}