الفرق بين المراجعتين ل"CSS/height"

المراجعة الحالية بتاريخ 18:12، 5 يوليو 2018

الخاصية height في CSS تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار.

بطاقة الخاصية

القيمة الابتدائية	`auto`
تُطبَّق على	جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	نسبة مئوية أو طول مطلق أو الكلمة المحجوزة `auto`.

/* كلمة محجوزة */
height: auto;

/* <length> أطوال */
height: 120px;
height: 10em;

/* <percentage> نسب مئوية */
height: 75%;

/* قيم عامة */
height: inherit;
height: initial;
height: unset;

الخاصيتان min-height و max-height لهما الأولوية على الخاصية height.

أمثلة

سنجرِّب في المثال الآتي استخدام الخاصية height لضبط ارتفاع عدِّة عناصر <div>، وذلك باستخدام الأطوال المطلقة <length> والنسب المئوية (من ارتفاع العنصر الحاوي للعنصر الهدف):

<div class="height-50px">
   <code>height: 50px;</code>
</div>
<div class="height-3em">
  <code>height: 3em;</code>
</div>
<div id="parent">
  <div id="child">
    <code>height: 50%;</code> (نصف ارتفاع عنصر الأب)
  </div>
</div>

شيفرة CSS:

div {
  box-sizing: border-box;
  margin-bottom: 1em;
  padding: 0.5em;
  border: 1px solid black;
}

.height-50px {
  height: 50px;
}

.height-3em {
  height: 3em;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 50%;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	3.0	4.0	4.0	1.0

البنية العامة

`<length>`

تحديد الارتفاع بالأطوال المطلقة.

`<percentage>`

تحديد الارتفاع كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي.

`auto`

سيحسب المتصفح قيمة ارتفاع العنصر تلقائيًا.

البنية الرسمية

height: auto | [ <length> | <percentage> ];

انظر أيضًا

صفحة الخاصية box-sizing التي تُستخدم لتعديل النموذج الصندوقي الافتراضي.
صفحة الخاصية width التي تُحدِّد عرض العناصر.

مصادر ومواصفات

مسودة CSS Intrinsic & Extrinsic Sizing Module Level 3.
مسودة CSS Basic Box Model. أضافت هذه المسودة الكلمات المحجوزة max-content و min-content و available و fit-content و border-box و content-box، لكن دعمها ما يزال ضعيفًا في المتصفحات.
مسودة CSS Transitions.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.

@@ سطر 47: / سطر 47: @@
 <div id="parent">
    <div id="child">
-     <code>height: 50%;</code> (half of its parent)
+     <code>height: 50%;</code> (نصف ارتفاع عنصر الأب)
    </div>
 </div>
@@ سطر 105: / سطر 105: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> التي تُستخدم لتعديل النموذج الصندوقي الافتراضي.
+* صفحة الخاصية <code>[[CSS/width|width]]</code> التي تُحدِّد عرض العناصر.
 == مصادر ومواصفات ==
 * مسودة [https://drafts.csswg.org/css-sizing-3/#width-height-keywords CSS Intrinsic & Extrinsic Sizing Module Level 3].