ویژگی max-height در css

ویژگی max-height در css | ارتفاع حداکثر تگ html

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت max-height در زبان css توضیحاتی را ارائه نماییم.

ویژگی max-height در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

معرفی ویژگی کاربردی max-height در زبان طراحی سی اس اس

توسط خاصیت max-height می توانیم یک ارتفاع حداکثر را برای محتوا در تگ html مربوطه مشخص نماییم.

در صورتی که بخواهیم محدوده ارتفاع محتوای یک تگ html از یک حداکثر تعیین شده بیشتر نشود، از خصوصیت max-height استفاده می کنیم.

نکات مهم

1. درصورتی که ارتفاع محتوای یک تگ html ، بزرگ تر از مقدار حداکثر ارتفاع تعیین شده باشد، محتوای آن را سرریز می کند. با خصوصیت overflow می توانید سر ریز شدن محتوای تگ html را کنترل کنید.
2. درصورتی که ارتفاع محتوای یک تگ html ، کوچک تر از مقدار حداکثر عرض تعیین شده باشد، خصوصیت max-height تاثیری نخواهد داشت.
3. در صورت استفاده از خصوصیت max-height ( ارتفاع حداکثر ) استفاده از صفت height هیچ تاثیری نخواهد داشت.

مقادیر صفت کاربردی max-height در زبان طراحی سی اس اس

صفت کاربردی max-height که در زبان طراحی CSS2 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

1. مقدار none
2. مقدار length ( مقدار عددی )
3. مقدار % ( مقدار درصدی )
4. مقدار initial
5. مقدار inherit

ویژگی max-height در css | ارتفاع حداکثر تگ html

مقدار none درون خاصیت max-height در زبان سی اس اس

اگر خاصیت max-height را برابر با مقدار none قرار دهیم، یعنی هیچ مقداری برای حداکثر ارتفاع در نظر نمی گیریم.

مقدار none به عنوان مقدار پیش فرض خصوصیت max-height می باشد.

مثال براساس مقدار none برای خاصیت max-height

[html] div {max-height: none;} [/html]

مقدار length ( مقدار عددی ) درون خاصیت max-height در زبان سی اس اس

اگر خاصیت max-height را برابر با مقدار length ( مقدار عددی ) قرار دهیم، یعنی می خواهیم یک مقدار عددی اعم از rem و px و cm و… جهت تعیین حداکثر ارتفاع تگ html مربوطه مشخص نماییم.

مثال براساس مقدار length ( مقدار عددی ) برای خاصیت max-height

محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی

[html] div {max-height: 50px;} [/html]

در صورتی که محتوای متن بالا را از طریق صفت max-height نخواهیم از حداکثر ارتفاع 70px بیشتر باشد ، خروجی کد در مرورگر اینترنتی به شکل زیر نمایش داده می شود:

محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی ، محتوای سایت آموزی

در مثال بالا مشاهده می کنید که به جهت بزرگ تر بودن محتوای تگ html از حداکثر ارتفاع تعیین شده ، سر ریز شدن محتوا را داشته ایم. اما با قرار دادن مقدار scroll برای خاصیت overflow سر ریز محتوا را کنترل کردیم و بخش سر ریز شده محتوا با اسکرول نمایش داده می شود.

مقدار % ( مقدار درصدی ) درون خاصیت max-height در زبان سی اس اس

اگر خاصیت max-height را برابر با مقدار % ( مقدار درصدی ) قرار دهیم، یعنی می خواهیم مرورگر ، مقدار درصدی را نسبت به حداکثر ارتفاع تگ نگهدارنده یا همان پدر تگ html مربوطه تعیین کند.

مثال براساس مقدار % ( مقدار درصدی ) برای خاصیت max-height

[html] div {max-height: 30%;} [/html]

مقدار initial درون خاصیت max-height در زبان سی اس اس

اگر خاصیت max-height را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت max-height در زبان سی اس اس

اگر خاصیت max-height را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

ویژگی max-height در css | ارتفاع حداکثر تگ html

بررسی خاصیت max-height از نظر نسخه زبان طراحی سی اس اس

خصوصیت max-height در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

بررسی ساختاری خصوصیت max-height

پشتیبانی مرورگرهای اینترنتی از خاصیت max-height در زبان طراحی سی اس اس

خاصیت css
max-height	1.0	7.0	1.0	2.0.2	7.0

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

ویژگی max-height در css | ارتفاع حداکثر تگ html

ویژگی max-height در css | ارتفاع حداکثر تگ html – اختصاصی سایت آموزی