الفرق بين المراجعتين لصفحة: «CSS/min-height»

المراجعة الحالية بتاريخ 18:55، 24 يوليو 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>حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</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;

انظر أيضًا

صفحة كل من الخاصيات width، و height المسؤولة عن تحديد أبعاد العنصر.
صفحة الخاصية max-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)‎.

@@ سطر 79: / سطر 79: @@
 == انظر أيضًا ==
-* صفحة كل من الخاصيات <code>[[CSS/width|width]]</code>، و<code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر.
+* صفحة كل من الخاصيات <code>[[CSS/width|width]]</code>، و <code>[[CSS/bottom|height]]</code> المسؤولة عن تحديد أبعاد العنصر.
 * صفحة الخاصية <code>[[CSS/max-height|max-height]]</code> التي تضبط الارتفاع الأقصى للعنصر.
 * صفحة الخاصية <code>[[CSS/max-width|max-width]]</code> التي تضبط العرض الأقصى للعنصر.