تعیین حداکثر ارتفاع المان در CSS – ویژگی max-height

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

چند نکته در مورد حداکثر ارتفاع المان در CSS

همانطور که پیشتر در مجموعه آموزشی CSS آموختید از ویژگی height برای تعیین ارتفاع المان های HTML استفاده می‌شود. در صورتی که ارتفاع محتوا یا مقداری که برای ویژگی height مشخص شده از مقدار ویژگی max-height بزرگتر باشد ارتفاع المان برابر با مقدار max-height می‌شود.

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

مشابه با ویژگی height می‌توانید برای ویژگی max-height نیز از مقادیر طول یا درصد (به صورت درصدی از ارتفاع بلوک دربرگیرنده) استفاده کنید.

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

نحوه استفاده از ویژگی max-height

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

p.a {
  max-height: 50px;
  border: 1px solid black;
}

با توجه به قانون CSS فوق، مقدار 50px برای این ویژگی باعث می‌شود حداکثر ارتفاع تمام المان های <p> که دارای کلاس a هستند برابر با 50 پیکسل شود. تصویر زیر نمایی از نتیجه قانون CSS فوق روی یک پاراگراف با محتوای طولانی را نمایش می‌دهد.

همانطور که در تصویر فوق مشاهده می‌کنید متن داخل پاراگراف از خطوط مرزی پیرامون المان سرریز شده است. با تخصیص مقدار auto به ویژگی overflow سرریز بریده می‌شود و به شکل خودکار یک نوار اسکرول برای مشاهده محتوای سرریز نمایان می‌شود.

p.a {
  max-height: 50px;
  border: 1px solid black;
  overflow: auto;
}

بازگشت به فهرست مجموعه آموزشی CSS