تغییر فاصله از بالای یک المنت با تغییر ارتفاع المنتی دیگر

Cyletech · Dec 31, 2011

سلام،
من خیلی گشتم ولی چیز درستی پیدا نکردم. اصلاً نمیدونستم چی باید سرچ کنم. ببخشید اگر سوالم تکراری هست. :rose:

من یک المنتی در پایین صفحه دارم که بصورت پیشفرض bottom:0px براش در نظر گرفتم که پایین هر صفحه قرار بگیره و تکون نخوره. اما در صفحه ای یک المنتی هست که ارتفاعش تغییر می کنه و با تغییر ارتفاع اون المنت اسکرول ایجاد میشه. در این صورت اون المنت اولیه سر جای خوش می مونه و با تغییر ارتفاع اون المنت تغییر نمی کنه.
من در حال حاضر position:absolute براش در نظر گرفتم. اگر relative قرار بدم درست میشه ولی مشکل اینجاست که بصورت پیش فرض باید ته صفحه قرار بگیره (همون bottom:0px) که در اینصورت این المنت میاد دقیقاً زیر اون المنت حالا وسط صفحه هم باشه براش مهم نیست.
با جاوا اسکریپت می تونم این مشکل رو برطرف کنم اما یه دستور شاید برای اینکار باشه که دیگه کلی کد ننویسم. اگر نباشه دیگه مجبورم دیگه.

ممنونم اگر پاسخ درست بدید،
علیرضا :rose:

omid_p30 · Jan 1, 2012

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

PHP:

.bottom-position{
position:fixed;
bottom:0;
}

اینجوری اگه صفحه اسکرول هم بخوره مشکلی پیش نمیاد و اون المنت همیشه در انتهای صفحه قرار می‌گیره.

Cyletech · Jan 1, 2012

نه دوست من. موقعیت fixed و bottom:0px باعث میشه لامنت آخر صفحه ثابت! بمونه. یعنی اگر اسکرول بگیره ، بیاری بالا اسکرول رو اون المنت هم همراهش میاد. در حالی که من اینو نمیخوام. میخوام اون المنت مقدار پیشفرضی داشته باشه که در صورت طولانی تر شدن ارتفاع یک المنت دیگه اون هم پایین تر قرار بگیره.
اگر درک مسئله برای هر کدوم از دوستان سخته من با تصویر نشونتون میدم. فقط بگید

omid_p30 · Jan 1, 2012

اون المنت زیری رو clear:both بده.

Cyletech · Jan 1, 2012

اون المنت زیری رو clear:both بده.

دوست خوبم از وقتی که میذاری ممنونم ولی بگذار ببینم دیگران چه نظری دارن. شما هم لطفاً محتوای w3schools.com رو خوب مطالعه کنید.

pouya saadeghi · Jan 1, 2012

راستش من چند بار پستتون رو خوندم ولی بازم یکم مبهم بود.
اگه ممکنه واضحتر توضیح بدید.

echessdesign · Jan 1, 2012

شما زحمت بکشید و کد ها تون رو قرار بدید...

Cyletech · Jan 2, 2012

چشم.

کد:

<style rel=stylesheet>
footer
{
    font-size:10pt;
    position:absolute;
    bottom:10px;
    right:0px;
    left:0px;
    border-top: solid thin #ebebeb;
    color:#666666;
    padding: 5px 7px 0px 15px;
}
section#page
{
    width: 787px;
    margin:auto;
    background-color: white;
    box-shadow: inset 0px -1px 2px #666666;
    color: #444444;
    padding: 4px 6px 9px 7px;
    margin-bottom: 7px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
</style>
<body>
<section id=page>
i feel bad!
</section>
<footer>
    <span style="margin: 0px 54px 0px 54px;">
something going on
    </span>
</footer>
</body>

یه بار دیگه بهتر توضیح میدم. یه فوتر (یه المنت) داریم که طبق روال باید ته صفحه قرار بگیره. یه استایل براش نوشتم که ته صفحه قرار بگیره. در صفحه ای یک المنتی هست که ارتفاعش تغییر می کنه. وقی ارتفاعش از یه حدی بیشتر میشه صفحه دارای اسکرول میشه و هی که بیشتر میشه باید فوتر همراهش بیاد پایین تر در حالی که ثابت سر جاش باقی می مونه. وقتی هم اسکرول از بین میره و ارتفاع اون المنت کمتر از پیش میشه باید فوتر همون پایین bottom:0px سر جاش بمونه.
این چیزیه که من میخوام. هر تغییری میدم امکان پذیر نیست

pouya saadeghi · Jan 2, 2012

اگه میخواین موقع اسکرول شدن همیشه فوتر دیده بشه، position فوتر رو fixed بذارید.

اگه میخواین همیشه پایین صفحه باشه و با اسکرول شدن به پایین دیده بشه اصلا نیازی به کد position نیست.
البته اگه حداقل ارتفاع کل body (حداقل ارتفاع باکس+ارتفاع فوتر + هدر + هر عنصری که ارتفاع رو افزایش میده) از 900 کمتر نباشه، تو رزولوشن های رایج مشکلی پیش نمیاد ولی اگه از 900 کمتر باشه فوتر به پایین صفحه نمیچسبه

Cyletech · Jan 3, 2012

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

pouya saadeghi · Jan 3, 2012

تو همین کد خودتون فقط کد position:absolute رو از فوتر بردارید؛
اینجوری فوتر دقیقا بعد از باکس قرار میگیره؛
ولی وقتی هدر ، و عناصری دیگه ای تو صفحه بذارید که حداقل ارتفاع صفحه از ارتفاع مرورگر (900 پیکسل) بیشتر بشه ، مشکل برطرف میشه.
منظورم اینه که حداقل ارتفاع صفحه رو افزایش بدید

Cyletech · Jan 3, 2012

تو همین کد خودتون فقط کد position:absolute رو از فوتر بردارید

خب اگر بردارم فوتر میاد بالا. باید با margin تنظیمش کنم که در هر رزولوشن تغییر می کنه و خب موقعیت خودش رو پیدا نمی کنه. یا اینکه شما میگید ارتفاع اون المنت رو بیشتر کنم که امکان پذیر نیست. یعنی راهی نیست؟

pouya saadeghi · Jan 3, 2012

بله.
اگه ارتفاع body کم باشه ، بدون اسکریپت نمیشه کاری کرد و فوتر بالا میاد ولی صفحه قراره همیشه اینطور خالی بمونه؟
بلاخره یه عکسی، یه هدری ، 4 خط متنی چیزی میتونید بذارید که ارتفاع حداقلی body زیادتر بشه.

Cyletech · Jan 4, 2012

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

omid_p30 · Jan 4, 2012

تو CSS3 و با استفاده از media queries میشه برای چند رزولوشن استایل‌های جدا تعریف کرد. مثلا:

PHP:

@media all and (min-width: 700px) {
  body {
    width: 640px;
  }
}
@media all and (min-width: 1000px) {
  body {
    width: 960px;
  }
}

این تکنیک البته استفاده‌های دیگه هم داره و خیلی می‌تونه به طراحان وب کمک کنه مخصوصا تو responsive web design استفاده میشه.
برای اطلاعات بیشتر اینجا‌ها رو ببین:
www.w3.org/TR/css3-mediaqueries/
http://css-tricks.com/css-media-queries/
http://reference.sitepoint.com/css/mediaqueries
البته به توصیه شما گوش کردم و مقاله‌های w3school رو خوندم(گرچه قبلا خونده بودم). چیزی درباره media query پیدا نکردم.