الفرق بين المراجعتين ل"CSS/height"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>height</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>height</code>}}</noinclude> | ||
− | الخاصية <code>height</code> في CSS تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> مضبوطة إلى <code>border-box</code> فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار. | + | الخاصية <code>height</code> في CSS تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> مضبوطة إلى <code>border-box</code> فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار. |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | == بطاقة الخاصية == | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 33: | سطر 20: | ||
|نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>auto</code>. | |نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>auto</code>. | ||
− | |} | + | |}<syntaxhighlight lang="css"> |
+ | /* كلمة محجوزة */ | ||
+ | height: auto; | ||
+ | |||
+ | /* <length> أطوال */ | ||
+ | height: 120px; | ||
+ | height: 10em; | ||
+ | |||
+ | /* <percentage> نسب مئوية */ | ||
+ | height: 75%; | ||
+ | |||
+ | /* قيم عامة */ | ||
+ | height: inherit; | ||
+ | height: initial; | ||
+ | height: unset; | ||
+ | </syntaxhighlight>الخاصيتان <code>[[CSS/min-height|min-height]]</code> و <code>[[CSS/max-height|max-height]]</code> لهما الأولوية على الخاصية <code>height</code>. | ||
== أمثلة == | == أمثلة == | ||
سطر 91: | سطر 93: | ||
== البنية العامة == | == البنية العامة == | ||
− | === | + | === <code>[[CSS/length|<length>]]</code> === |
تحديد الارتفاع بالأطوال المطلقة. | تحديد الارتفاع بالأطوال المطلقة. | ||
− | === | + | === <code>[[CSS/percentage|<percentage>]]</code> === |
تحديد الارتفاع كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي. | تحديد الارتفاع كنسبة مئوية من ارتفاع العنصر الكتلي الحاوي للعنصر الحالي. | ||
− | === | + | === <code>auto</code> === |
سيحسب المتصفح قيمة ارتفاع العنصر تلقائيًا. | سيحسب المتصفح قيمة ارتفاع العنصر تلقائيًا. | ||
مراجعة 11:53، 4 يوليو 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> (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.