خاصية ارتفاع CSS
مثال
قم بتعيين ارتفاع عنصري <div>:
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد الخاصية ارتفاع height
العنصر.
لا يتضمن ارتفاع العنصر المساحة المتروكة أو الحدود أو الهوامش!
إذا كان height: auto;
العنصر سيضبط ارتفاعه تلقائيًا للسماح بعرض محتواه بشكل صحيح.
إذا height
تم ضبطه على قيمة عددية (مثل وحدات البكسل ، (r) em ، النسب المئوية) ثم إذا كان المحتوى لا يتناسب مع الارتفاع المحدد ، فسيتم تجاوزه. يتم تحديد كيفية تعامل الحاوية مع المحتوى الفائض بواسطة
خاصية overflow .
ملاحظة: تتجاوز الخاصيتان min -height و
max-height
height
الخاصية.
القيمة الافتراضية: | تلقاءي |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | CSS1 |
بناء جملة JavaScript: | الكائن .style.height = "500px" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
بنية CSS
height: auto|length|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
auto | The browser calculates the height. This is default | |
length | Defines the height in px, cm, etc. Read about length units | |
% | Defines the height in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
اضبط ارتفاع العنصر على 50٪ من ارتفاع العنصر الأصل:
#parent {
height: 100px;
}
#child {
height: 50%;
}
الصفحات ذات الصلة
دروس CSS: ارتفاع وعرض CSS
دروس CSS: نموذج صندوق CSS
مرجع CSS: خاصية العرض
مرجع HTML DOM: خاصية الارتفاع