min-height

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

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

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

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

.element {
  min-height: 100px;  
}

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

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

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

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

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

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

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

مقدار طولی

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

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

مقدار درصدی

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

.dad {
  height: 100px;
}

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

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

inherit

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