تنظیم ارتفاع استایل

[hemmattby]

چطور میشه توی css، ارتفاع یه استایلو به اندازه ی ارتفاع کل صفحه تعیین کرد؟ من هردوی کد های
bottom:0px و hight:100%
رو امتحان کردم. ولی ارتفاع استایل، میشه اندازه ی صفحه مانیتور.
یعنی اگه اسکرول رو پایین بیاریم؛ استایل ادامه پیدا نمیکنه.
البته یه راه حل به ذهن خودم رسیده. این که قبل از تنظیم ارتفاع، به همان صورت ذکر شده؛
از این ویژگی استفاده کنمosition:fixed
در این صورت، اگه بک گراند استایل، ساده باشه با حرکت دادن اسکرول، به نظر میرسه که
استایل هم مثل سایر محتوی صفحه، ثابت میمونه و ارتفاع اون به اندازه ی کل صفحست.
ولی به نظر میاد، این روش ، خلاف استاندار هاست و من فقط صورت مسئله رو تقییر دادم!
باید چی کار کنم؟

 

[echessdesign]

درود بر شما
پیش تر در این رابطه در تایپیک hack css توضیح داده شده است
موفق باشید

 

[delhamid]

بیشتر توضیح بدید راهنماییتون میکنم

 

[hemmattby]

درود بر شما
پيش تر در اين رابطه در تايپيک hack css توضيح داده شده است
موفق باشيد.

echessdesign عزيز، من عبارتي که گفتيد رو توي سايت سرچ کردم ولي به نتيجه ي مناسبي
دست پيدا نکردم. ثانيا، شما چرا لينک اون تاپيک رو نزاشتين؟ البته من فکر کنم شما درست
منظور من رو از پرسش مطرح شده، نفهميدين.

بيشتر توضيح بديد راهنماييتون ميکنم

چشم، بيشتر توضيح ميدم.

کد css زير رو در نظر بگيريد:
.overlying {position:absolute;width:954px;top:0px;left:36px;background-color:black}

اون رو در ميان کد هاي html به اين صورت به کار ميبرم:
<div style="height:100%"class=overlying></div>

ويا به اين صورت:
<div style="bottom:0px"class=overlying></div>

در هر دوصورت، نتيجه به صورت مربعي به طول"954px" و به رنگ"black"
خواهد بود که از سمت چپ،"36px" و از بالا،"0px" فاصله دارد.

حالا کد زير را در نظر بگيريد:
<div style="position:absolute;width:50px;height:50px;top:1000000px;left:36px;background-color:red">majidonline</div>

نتيجه ي کد بالا، به تنهايي، مربعي به ارتفاع"50px"، و به رنگ"E0E0E0" خواهد بود که از بالا ي صفحه،
"1000000px"فاصله دارد و در آن، عبارت majidonline، نوشته شده است.

از آنجايي که عرض صفحه ي نمايش (احتمالا) همه ي کاربران اينترنت، کم تر از 1000000px است؛
يک اسکرول بار در يکي از چهار وجه مرورگر اجرا کننده ي کد هاي فوق،(اکثرا در سمت چپ يا راست)
ديده ميشود که با حرکت دادن لغزنده ي داخل اسکرول بار، ميتوان ثاير بخش هاي صفحه را ديد.

اکنون فرض کنيد، دو کد بالا را که با زير خط مشخص شده اند، با هم به کار ببريم.
مربعي که رنگ مشکي دارد، در ابتدا ي صفحه و مربعي که رنگ قرمز دارد در انتهاي صفحه و با
فاصله ي زيادي از هم، قرار ميگيرند.

حالا سوال اينجاست که چگونه ميتوان کاري کرد که اين فاصله، به جاي اين که خالي باشد، ادامه ي
مربع اول قرار گيرد و در واقع به جاي اين که ار تفاع مربع اول، به اندازه ي عرض صفحه نمايشگر، متقير
باشد؛ به اندازه ي ارتفاع مربع دوم باشد و مانند بک گراند، همه ي فضاهاي ي خالي را بپوشاند.
احتمالا باید به جای ویژگی های"height:100%"و "bottom:0px"، از ویژگی دیگری استفاده کنم.
آیا همین طور است؟ اگر همین طور است، آن ویژگی چیست واگر این طور نیست، چه راه حل دیگری
وجود دارد؟

لطفا حالا که اينقدر توضيح دادم، راهنماييم کنيد.

 

[delhamid]

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

دوتا Div تعریف میکنید.
با پهنای مشابه مثلا 800
اولی به هر ارتفاعی که میخواهید که معمولاً در طراحی صفحات وب ارتفاع استاتیک نمیدیم.
بعد مربع یا ناحیه دوم هم با مشخصات خاص خودش (رنگ و ...)
مثل زیر :
کد زیرو توی نت پد Paste کنید تا درست مشاهده نمایید.

<div style="height:925px;width:800px;background-color:gray">This is A Area</div>
<div style="width:800px;background-color:khaki">Hello HaMiD Fadaei - This is B area Bottom Of A</div>

باز هم مشکلی بود یا درست متوجه نشده بودم بگید
موفق باشیـ ـ ـ ـد

 

[hemmattby]

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

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

یعنی ارتفاع جسم بر حسب جسم دیگه ای تعیین بشه نه این که بهش عدد بدیم.

مثلا بگیم همیشه تا انتهای صفحه برو، یا همیشه بالای فوتر باش.
بازم از توجهتون ممنونم.

 

[delhamid]

خب حالا مسئله فرق کرد.

ببینید اینی که شما میگی با مسئله قبل فرق میکنه.
همون طور که گفتم هیچوقت ما استاتیک مقدار نمیدیم واسه شما گفتم که متوجه منظورم بشید.
خب اینی که شما میگید Div های تو در تو هست

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