height

با استفاده از ویژگی height اندازه ارتفاع ناحیه محتوای عنصر تعیین می شود.

قبل از بررسی این ویژگی باید با Box Model در سی اس اس آشنا باشیم تا نواحی مختلف هر عنصر را بشناسیم.

برای ارتفاع محتوای عنصر زیر ارتفاع 100 پیسکل تعیین شده است:

 


div {
  height: 100px;
  width: 100px;
}

 

نکته مهمی که باید توجه شود این است که همیشه ارتفاع عنصر دقیقا همانی نخواهد بود که توسط ویژگی height تعیین شده است. امکان دارد عنصر دارای padding یا همان فاصله داخلی باشد که مقدار آن به ارتفاع نهایی عنصر اضافه می شود.

 


div {
  height: 100px;
  padding: 10px;

  /* height == 10px + 100px + 10px == 120px */
}

 

به عنوان نمونه در مثال بالا ارتفاع نهایی عنصر 120 پیکسل خواهد بود چرا که سمت بالا و پایین عنصر دارای 10 پیکسل فضای داخلی می باشند.

البته این روش را می توان تغییر داد. یعنی می توان طوری عمل کرد که حتی باوجود padding ارتفاع نهایی همان 100 پیکسل باشد. برای این کار می توان از ویژگی box-sizing استفاده کرد که در مطالب آینده آن را بررسی خواهیم کرد.

برای عناصر خطی مثل <a> و یا <span> ویژگی height هیچ تاثیری روی آنها نخواهد گذاشت. برای اینکه بتوان از طریق این ویژگی ارتفاع اینگونه عناصر را کنترل کرد باید توسط ویژگی display این عناصر را از حالت خطی خارج کنیم. مثلا می توان display آنها را تبدیل به block و یا inline-block کرد.

 


span {
  display: inline-block;
  height: 100px;
}

 

نکته دیگر اینکه نتیجه نهایی ارتفاع عنصر می تواند توسط ویژگی های min-height و max-height بازنویسی شود و عرض دقیقا آنچه که توسط ویژگی height تعیین شده است نباشد.

 

مقادیر ویژگی height

 


height: <length> | <percentage> | auto | inherit

 

 

مقدار طولی

به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.

 


height: 100px;
height: 4rem;
height: 10vh;
height: 100cm;

 

 

مقدار درصدی

اگر از مقادیر درصدی استفاده کنیم مرورگر مقدار را نسبت به ارتفاع نگهدارنده یا همان پدر عنصر تعیین می کند.

 


.dad {
  height: 100px;
}

.dad .boy {
  height: 10%; /* 10px */
}

 

 

auto

زمانی که از کلمه کلیدی auto برای این ویژگی استفاده می شود مرورگر ارتفاع عنصر را به صورت خودکار بنا به شرایط عنصر تعیین می کند.

ناگفته نماند که auto مقدار اولیه یا همان پیشفرض ارتفاع می باشد.

 

inherit

با استفاده از کلمه کلیدی inherit مقدار height عنصر برابر با مقدار ویژگی height عنصر پدر خواهد بود.

 

مثال

دموی زیر را بررسی کنید:

 

See the Pen height by Mojtaba Seyedi (@seyedi) on CodePen.

 

سوالت رو توی پنل بحث و گفتگو مطرح کن.

5 دیدگاه برای “height

  1. سلام استاد
    برای aside یه این جوری کدی گذاشتم
    width: 26%;
    float: right;
    padding: 15px;
    background: #3e3741;
    مثلا الان 5 تا پست دارم بک گراند aside به فوتر چسبیده وقتی 10 تا بشه بک گراند aside از فوتر جدا میشه :/
    هر چی درصدی عدد میزارم درست نمیشه
    با عدد های پیکسلی هم که جالب نمیشه هر دفعه باید یه مقدار بهش اضافه کرد بعد ریسپانسیوش خراب میشه و انتها نداره :|
    چطوری میشه رنگ بک گراندش رو به فوتر بچسبانم که وقتی 10 تا پست هم که شد ازش جدا نشه ؟ اصلا اینجوری در میاد ؟

    1. سلام، متوجه نمیشم اینطوری

      کدتون رو بزارید codepen.io و اینجا لینک بدید. یه خورده هم کامل تر بعدش توضیح بدید که چی میخواید.

      و سوالتون رو هم توی پنل پرسش و پاسخ مطرح کنید که دوستاتون کمکتون کنند.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *