מה זה max-height?

המאפיין max-height ב-CSS קובע את הגובה המקסימלי של האלמנט. הוא משמש להגביל את גובה האלמנט כך שלא יעלה על הערך המוגדר, גם אם גובה האלמנט הוגדר באחוזים או בערכים אחרים.

שימוש במאפיין max-height

באמצעות max-height ניתן למנוע מהאלמנט לגדול מעבר לגובה מסוים, דבר שיכול להיות שימושי בעיצובים רגישים (responsive) או כשיש צורך לשמור על עיצוב מסוים.

דוגמה לשימוש ב-max-height

להלן דוגמה לשימוש במאפיין max-height:

בדוגמה זו, האלמנט יתפוס גובה של עד 200 פיקסלים, וכל תוכן נוסף יתגלל בתוך האלמנט.

שימושים מתקדמים

באמצעות max-height ניתן לשלוט בעיצוב פריסות רגישות (responsive) ולמנוע מהאלמנט לגדול מעבר לגובה הרצוי.

    <div style="max-height: 200px; overflow: auto; border: 2px solid black; background: lightgreen;">
                    תוכן עם גובה מקסימלי של 200 פיקסלים
                  </div>