الفرق بين المراجعتين ل"CSS/min-height"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>min-height</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>min-height</code>}}</noinclude> | ||
| − | الخاصية <code>min-height</code> في CSS تضبط الارتفاع الأدنى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/height|height]]</code> من أن تقل عن القيمة المُحدَّدة في الخاصية <code>min-height</code>. | + | الخاصية <code>min-height</code> في CSS تضبط الارتفاع الأدنى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/height|height]]</code> من أن تقل عن القيمة المُحدَّدة في الخاصية <code>min-height</code>. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>auto</code>. | |نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>auto</code>. | ||
| − | |} | + | |}<syntaxhighlight lang="css"> |
| + | /* <length> أطوال */ | ||
| + | min-height: 3.5em; | ||
| + | |||
| + | /* <percentage> نسب مئوية */ | ||
| + | min-height: 75%; | ||
| + | |||
| + | /* كلمات محجوزة */ | ||
| + | min-height: none; | ||
| + | |||
| + | /* قيم عامة */ | ||
| + | min-height: inherit; | ||
| + | min-height: initial; | ||
| + | min-height: unset; | ||
| + | </syntaxhighlight>سيُضبَط ارتفاع العنصر إلى قيمة الخاصية <code>min-height</code> إذا كانت قيمة <code>min-height</code> أكبر من <code>[[CSS/max-height|max-height]]</code> أو <code>[[CSS/height|height]]</code>. | ||
== أمثلة == | == أمثلة == | ||
| سطر 62: | سطر 64: | ||
== البنية العامة == | == البنية العامة == | ||
| − | === | + | === <code>auto</code> === |
القيمة الافتراضية وهي عدم وجود حد أدنى للارتفاع. | القيمة الافتراضية وهي عدم وجود حد أدنى للارتفاع. | ||
| − | === | + | === <code>[[CSS/length|<length>]]</code> === |
تحديد الارتفاع الأدنى بالأطوال المطلقة، ولا يجوز استخدام القيم السالبة. | تحديد الارتفاع الأدنى بالأطوال المطلقة، ولا يجوز استخدام القيم السالبة. | ||
| − | === | + | === <code>[[CSS/percentage|<percentage>]]</code> === |
تحديد الارتفاع الأدنى كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز استخدام القيم السالبة. | تحديد الارتفاع الأدنى كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز استخدام القيم السالبة. | ||
مراجعة 11:57، 4 يوليو 2018
الخاصية min-height في CSS تضبط الارتفاع الأدنى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية height من أن تقل عن القيمة المُحدَّدة في الخاصية min-height.
بطاقة الخاصية
| القيمة الابتدائية | 0
|
|---|---|
| تُطبَّق على | جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto.
|
/* <length> أطوال */
min-height: 3.5em;
/* <percentage> نسب مئوية */
min-height: 75%;
/* كلمات محجوزة */
min-height: none;
/* قيم عامة */
min-height: inherit;
min-height: initial;
min-height: unset;
سيُضبَط ارتفاع العنصر إلى قيمة الخاصية min-height إذا كانت قيمة min-height أكبر من max-height أو height.
أمثلة
سنستخدم في المثال الآتي عنصر <div> ارتفاعه يساوي 30% على ألّا يقل عن قيمة الخاصية min-height ألا وهي 150px:
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
شيفرة CSS:
div {
height: 30%;
min-height: 150px;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 7.0 | 7.0 | 1.0 |
البنية العامة
auto
القيمة الافتراضية وهي عدم وجود حد أدنى للارتفاع.
<length>
تحديد الارتفاع الأدنى بالأطوال المطلقة، ولا يجوز استخدام القيم السالبة.
<percentage>
تحديد الارتفاع الأدنى كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي، ولا يجوز استخدام القيم السالبة.
البنية الرسمية
min-height: <length> | <percentage> | auto;
مصادر ومواصفات
- مسودة CSS Intrinsic & Extrinsic Sizing Module Level 3، أضافت هذه المواصفة الكلمات المحجوزة
max-contentوmin-contentوfit-contentوfill-availableلكنها ليست مدعومة في المتصفحات بعد. - مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).