max-height

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

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

در مثال زیر عنصر ارتفاع محتوای داخلش را گرفته است:

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

.element {
  max-height: 100px;  
}

همانطور که مشاهده می کنید این ارتفاع بیشینه به ما اجازه نمی دهد تا ادامه محتوای عنصر را مشاهده کنیم. برای کنترل این موضوع می توانیم از ویژگی overflow کمک بگیریم.

.element {
  max-height: 100px;  
  overflow: auto;
}

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

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

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

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

max-height: <length> | <percentage> | inherit

مقدار طولی

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

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

مقدار درصدی

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

.dad {
  height: 100px;
}

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

اگر ارتفاع عنصر نگهدارنده بصورت دقیق مشخص نشده (مثلا ارتفاعش به اندازه محتوایش وابسته است) و ویژگی position آن از نوع absolute یا fixed نباشد، مقدار درصدی عنصر فرزند صفر در نظر گرفته می شود و مقادیر درصدی تاثیری برای ارتفاع آن نخواهد داشت.

inherit

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