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.

 

بیشتر بخوانید

مطالب مرتبط

16 دیدگاه برای “height”

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

    پاسخ

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

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

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

      پاسخ

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

    پاسخ

  7. متوجه شدم منظور محاسبه ارتقاع کلی عنصر بود که به این صورت حساب میشه
    height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
    بذارید به پای خستگی زیاد : )

    پاسخ

  8. سلام
    میخواستم بپرسم وقتی داریم یه باکس طراحی میکنیم میتونیم برای نگهدارنده اون باکس ارتفاع تعیین کنیم یا باید اجازه بدیم ارتفاع توسط محتوا تعیین بشه.منظور من ارتفاع خود محتوا نیست، منظورم ارتفاع عنصر نگهدارنده هست.
    به صورت کلی در چه مواردی اجازه داریم برای عنصر ارتفاع تعیین کنیم؟
    ممنون

    پاسخ

    1. سلام، نمیشه کلی این رو جواب داد.
      تنها جایی میتونید ارتفاع ثابت در نظر بگیرید که مطمین هستید محتوای اون عنصر بیشتر از اون ارتفاع نمیشه که اون هم گاهی دست شما نیست.
      … واقعا نمیشه جواب داد این سوال رو چون موارد خیلی متفاوتی هستش. گاهی نیاز هست از overflow استفاده کرد گاهی نیاز هستش ارتفاع حداقل داد، گاهی باید ارتفاع بیشینه داد. خلاصه که اذیتتون نکنم بذارید ارتفاع رو محتوا تشکیل بدند مگر اینکه خلافش رو “نیاز” داشته باشید.

      پاسخ

      1. مثلاً من می‌خوام یه باکس درست کنم که یه عکس داخلشه و یه نوشته زیرش
        به نظر شما از height استفاده کنم یا مثلاً با padding ای باکس رو درست کنم.
        آموزشی در این زمینه نمی‌شناسید که برم بخونم؟

        پاسخ

  9. سلام
    من هر کار میتونم نمیتونم مقدار درصدی به Height بدم و مقدار درصدی اصلا کار نمیکنه میشه راهنمایی کنید؟

    پاسخ

      1. چطور میشه برای Height قسمت body اندازه صفحه رو تعیین کرد؟ یعنی خودش بفهمه که مثلا اندازه Height صفحه 768 هست

        پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

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