الفرق بين المراجعتين لصفحة: «CSS/max-height»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>max-height</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>max-height</code>}}</noinclude> | ||
الخاصية <code>max-height</code> في CSS تضبط الارتفاع الأقصى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/height|height]]</code> من أن تتجاوز القيمة المُحدَّدة في الخاصية <code>max-height</code>. | الخاصية <code>max-height</code> في CSS تضبط الارتفاع الأقصى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/height|height]]</code> من أن تتجاوز القيمة المُحدَّدة في الخاصية <code>max-height</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>none</code>. | |نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>none</code>. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* <length> أطوال */ | |||
max-height: 3.5em; | |||
/* <percentage> نسب مئوية */ | |||
max-height: 75%; | |||
/* كلمات محجوزة */ | |||
max-height: none; | |||
/* قيم عامة */ | |||
max-height: inherit; | |||
max-height: initial; | |||
max-height: unset; | |||
</syntaxhighlight>الخاصية <code>max-height</code> لها أولوية على الخاصية <code>[[CSS/height|height]]</code>، لكن الخاصية <code>[[CSS/min-height|min-height]]</code> لها أولوية على <code>max-height</code>. | |||
== أمثلة == | == أمثلة == | ||
سنستخدم في المثال الآتي عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> ارتفاعه يساوي <code>300px</code> على ألّا يتجاوز قيمة الخاصية <code>max-height</code> ألا وهي <code>30vh</code> (أي 30% من ارتفاع إطار العرض):<syntaxhighlight lang="html"> | سنستخدم في المثال الآتي عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> ارتفاعه يساوي <code>300px</code> على ألّا يتجاوز قيمة الخاصية <code>max-height</code> ألا وهي <code>30vh</code> (أي 30% من ارتفاع إطار العرض):<syntaxhighlight lang="html"> | ||
<div> | <div>حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية. | ||
</div> | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
| سطر 62: | سطر 65: | ||
== البنية العامة == | == البنية العامة == | ||
=== | === <code>none</code> === | ||
لا يوجد ارتفاع أقصى لهذا العنصر. | لا يوجد ارتفاع أقصى لهذا العنصر. | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
تحديد الارتفاع الأقصى بالأطوال المطلقة. | تحديد الارتفاع الأقصى بالأطوال المطلقة. | ||
=== | === <code>[[CSS/percentage|<percentage>]]</code> === | ||
تحديد الارتفاع الأقصى كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي. وإذا لم يكن ارتفاع ذلك العنصر مُحدَّدًا بوضوح، فستعامل قيمة النسبة المئوية على أنها صفر. | تحديد الارتفاع الأقصى كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي. وإذا لم يكن ارتفاع ذلك العنصر مُحدَّدًا بوضوح، فستعامل قيمة النسبة المئوية على أنها صفر. | ||
| سطر 74: | سطر 77: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة كل من الخاصيات <code>[[CSS/width|width]]</code>، و <code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر. | |||
* صفحة الخاصية <code>[[CSS/min-height|min-height]]</code> التي تضبط الارتفاع الأدنى للعنصر. | |||
* صفحة الخاصية <code>[[CSS/max-width|max-width]]</code> التي تضبط العرض الأقصى للعنصر. | |||
* صفحة الخاصية <code>[[CSS/min-width|min-width]]</code> التي تضبط العرض الأدنى للعنصر. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-sizing-3/#width-height-keywords CSS Intrinsic & Extrinsic Sizing Module Level 3]، أضافت هذه المواصفة الكلمات المحجوزة <code>max-content</code> و <code>min-content</code> و <code>fit-content</code> و <code>fill-available</code> لكنها ليست مدعومة في المتصفحات بعد. | * مسودة [https://drafts.csswg.org/css-sizing-3/#width-height-keywords CSS Intrinsic & Extrinsic Sizing Module Level 3]، أضافت هذه المواصفة الكلمات المحجوزة <code>max-content</code> و <code>min-content</code> و <code>fit-content</code> و <code>fill-available</code> لكنها ليست مدعومة في المتصفحات بعد. | ||
* مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions]. | * مسودة [https://drafts.csswg.org/css-transitions/#animatable-css CSS Transitions]. | ||
* مواصفة [http://www.w3.org/TR/CSS2/visudet.html#min-max-heights CSS Level 2 (Revision 1)]. | * مواصفة [http://www.w3.org/TR/CSS2/visudet.html#min-max-heights CSS Level 2 (Revision 1)]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Box Model]] | [[تصنيف:CSS Box Model|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 17:01، 24 يوليو 2018
الخاصية max-height في CSS تضبط الارتفاع الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تتجاوز القيمة المُحدَّدة في الخاصية max-height.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | نسبة مئوية أو طول مطلق أو الكلمة المحجوزة none.
|
/* <length> أطوال */
max-height: 3.5em;
/* <percentage> نسب مئوية */
max-height: 75%;
/* كلمات محجوزة */
max-height: none;
/* قيم عامة */
max-height: inherit;
max-height: initial;
max-height: unset;
الخاصية max-height لها أولوية على الخاصية height، لكن الخاصية min-height لها أولوية على max-height.
أمثلة
سنستخدم في المثال الآتي عنصر <div> ارتفاعه يساوي 300px على ألّا يتجاوز قيمة الخاصية max-height ألا وهي 30vh (أي 30% من ارتفاع إطار العرض):
<div>حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</div>
شيفرة CSS:
div {
height: 300px;
max-height: 30vh;
}
لاحظ أنَّك إذا قللتَ ارتفاع نافذة المتصفح، فسيقل ارتفاع العنصر السابق، لأنَّ ارتفاع إطار العرض قد نقص؛ وإذا لم يتسع المحتوى ضمن العنصر، فسينظر المتصفح ما هي قيمة الخاصية overflow لكي يعرف ما هو السلوك الذي يجب تطبيقه.
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 7.0 | 7.0 | 1.0 |
البنية العامة
none
لا يوجد ارتفاع أقصى لهذا العنصر.
<length>
تحديد الارتفاع الأقصى بالأطوال المطلقة.
<percentage>
تحديد الارتفاع الأقصى كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي. وإذا لم يكن ارتفاع ذلك العنصر مُحدَّدًا بوضوح، فستعامل قيمة النسبة المئوية على أنها صفر.
البنية الرسمية
max-height: <length> | <percentage> | none;
انظر أيضًا
- صفحة كل من الخاصيات
width، وheightالمسؤولة عن تحديد أبعاد العنصر. - صفحة الخاصية
min-heightالتي تضبط الارتفاع الأدنى للعنصر. - صفحة الخاصية
max-widthالتي تضبط العرض الأقصى للعنصر. - صفحة الخاصية
min-widthالتي تضبط العرض الأدنى للعنصر.
مصادر ومواصفات
- مسودة CSS Intrinsic & Extrinsic Sizing Module Level 3، أضافت هذه المواصفة الكلمات المحجوزة
max-contentوmin-contentوfit-contentوfill-availableلكنها ليست مدعومة في المتصفحات بعد. - مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).