با طرح بلوک، اغلب مورد نیاز است ارتفاع بلوک div را 100٪ کنید... نشانه ساده ارتفاع = 100% v بخشدستیابی به نتیجه مطلوب ممکن نخواهد بود، بنابراین تکنیک خاصی وجود دارد که در این مقاله در مورد آن صحبت خواهم کرد.

قبل از دادن کد، نحوه عملکرد آن را توضیح خواهم داد. ماهیت آن نشان دادن است ارتفاع = 100٪ برای همه بلوک های مادر، از جمله، و html... به عنوان مثال، این کد به شما این امکان را می دهد div با ارتفاع 100%:

در نتیجه هر دو div ها 100% بالا خواهند بود... لطفا توجه داشته باشید که در صورت حذف از ارتفاع html 100%، آنگاه چیزی از آن بر نمی آید. به طور مشابه، اگر بالا بخشکنار گذاشتن ارتفاع 100%، و باطن را رها کن، پس باطن با نخواهد بود 100% ارتفاع یعنی یادت باشه یک div با ارتفاع 100٪ ایجاد کنید، هر بلوک والد نیز باید با ارتفاع 100٪ ساخته شود.

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

نظرات (6):

03.05.2013 20:37:02

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

پاسخ

03.05.2013 21:55:51

محائل! من روش پیشنهادی را امتحان کردم - کار می کند، اما با این احتیاط که بلوک های div که ارتفاع آنها روی 100٪ تنظیم شده است نباید بزرگتر از پنجره مرورگر باشد. اگر بلوک از نظر ارتفاع در پنجره مرورگر مناسب نباشد، بلوک کاملاً با رنگ پس‌زمینه رنگی نمی‌شود. فقط قسمتی از بلوک که در پنجره مرورگر قرار می گیرد با رنگ پس زمینه رنگ می شود. این کد برای مثال است.

سبک متن css (4)

بدون محتوا، ارتفاع برای محاسبه درصد مهم نیست. با این حال، اگر هیچ کدام از والدین مشخص نشده باشند، عرض درصدی از DOM را می گیرد. (با استفاده از مثال شما) با قرار دادن div دوم در div اول نتیجه ... مثال زیر ...

دیو دوم 30 درصد ارتفاع دیو اول خواهد بود.

چرا درصد برای ارتفاع کار نمی کند اما درصد برای عرض؟

#عرض کاری 80% نمایپورت است، اما #ارتفاع بدون کار به 0 ختم می شود.

باید ظرفی با ارتفاع به آن بدهید. width از viewport به عنوان عرض پیش فرض استفاده می کند

گزینه دیگر اضافه کردن سبک به div است

و این بدان معنی است که عنصر نسبت به نزدیکترین جد واقع شده قرار دارد.

درصد در ویژگی height دارای پیچیدگی جزئی است و ویژگی های عرض و ارتفاع در واقع رفتار متفاوتی با یکدیگر دارند. اجازه دهید شما را با مشخصات فنی آشنا کنم.

ارتفاع:

حاویتولید شده است مسدود کردن... اگر ارتفاع بلوک حاوی صریحاً مشخص نشده باشد (یعنی به ارتفاع محتوا بستگی دارد)، و عنصر کاملاً در موقعیت قرار نگرفته باشد، مقدار به "خودکار" ارزیابی می شود. درصد ارتفاع در عنصر ریشه نسبت به بلوک حاوی اولیه... توجه داشته باشید. برای عناصر کاملاً دارای موقعیت، حاوی یک بلوک بر اساس یک عنصر در سطح بلوک، درصد نسبت به ارتفاع جعبه بالشتک آن عنصر محاسبه می شود.

خوب، بیایید این کار را مرحله به مرحله انجام دهیم:

درصد نسبت به ارتفاع بلوک محاسبه می شود، حاویتولید شده است مسدود کردن .

درصد بر اساس عرض بلوک بلوک تولید شده محاسبه می شود.

به این مثال‌های آشنا نگاهی بیندازید، که از نمونه قبلی برای تغییر عرض به جای ارتفاع اصلاح شده‌اند:

• 50% عرض: 200px 200px - 100px در مورد #سی سی
• عرض 50٪: خودکار 50٪ از هر عرض است: به پایان می رسد خودکار، بر خلاف ارتفاع، قانون خاصی وجود ندارد که این مورد را به گونه ای متفاوت مدیریت کند.

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

عرض بستگی به مقادیر سایر خواص دارد. بخش های زیر را ببینید.

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

مقادیر سایر ویژگی های مورد استفاده باید شامل محدودیت های زیر باشد:

"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = عرض بلوک حاوی

بسیار خوب، بنابراین عرض بعلاوه حاشیه‌ها، حاشیه‌ها و حاشیه‌های مربوطه باید به عرض بلوک حاوی اضافه شوند (a نهفرزندان، نحوه عملکرد قد). پیشنهاد دیگر:

اگر "width" روی "auto" تنظیم شود، هر مقدار دیگر "auto" به "0" تبدیل می شود و "width" از برابری حاصل می آید.

آها! بنابراین در این مورد، 50٪ عرض: خودکار 50٪ از نمای دید است. امیدوارم همه چیز در نهایت منطقی باشد!

* حداقل در این مورد چقدر مهم است. مشخصات خوب، حالا همه چیز منطقی است.

شرح

حداکثر ارتفاع یک عنصر را تنظیم می کند. مقدار ارتفاع عنصر بر اساس مقادیر ویژگی های مجموعه ارتفاع، حداکثر ارتفاع و حداقل ارتفاع محاسبه می شود. جدول شکل 1 نشان می دهد که چگونه مرورگر هنگام استفاده از ویژگی های سبک مشخص شده با هم هدایت می شود.

داده های جدول را باید به صورت زیر درک کرد. اگر مقدار ارتفاع بیشتر از مقدار max-height باشد، ارتفاع عنصر برابر با مقدار max-height در نظر گرفته می شود.

نحو

حداکثر ارتفاع: مقدار | علاقه | هیچکدام | به ارث می برند

ارزش ها

پیکسل ها (px)، درصدها (%) و سایر واحدهای اندازه گیری پذیرفته شده در CSS به عنوان مقادیر پذیرفته می شوند. مقادیر منفی مجاز نیستند.

هیچ کدام این ویژگی را لغو نمی کند. inherit مقدار را از والد به ارث می برد.

HTML5 CSS2.1 IE Cr Op Sa Fx

نتیجه این مثال در شکل نشان داده شده است. یکی

برنج. 1. نتیجه استفاده از ویژگی max-height

مدل شی

document.getElementById ("elementID") .style.maxHeight

مرورگرها

اینترنت اکسپلورر تا و شامل نسخه 7.0 از مقدار ارثی پشتیبانی نمی کند.