CSS/height

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

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

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

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

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

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

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

أمثلة

سنجرِّب في المثال الآتي استخدام الخاصية 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> (half of its parent)
  </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> ];

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

• مسودة 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.