min-height հատկությունը

min-height հատկությունը սահմանում է տարրի նվազագույն բարձրությունը: Հատկության արժեքը կարող է լինել ցանկացած չափման միավոր կամ none հիմնաբառը, որը նշանակում է արժեքի բացակայություն:

Սովորաբար նշվում է լողացող լայնություն ունեցող տարրի համար (բարձրությունը նշված է տոկոսներով կամ ընդհանրապես նշված չէ, և տարրը բարձրությամբ ընդլայնվում է իր պարունակությամբ):

Եթե նշված է նվազագույն բարձրություն, ապա տարրը չի կարող ավելի փոքր դառնալ այդ բարձրությունից: Եթե տեքստը ավելի քիչ է, քան անհրաժեշտ է min-height-ի համար, տարրը կունենա min-height բարձրություն:

Եթե տեքստը ավելի շատ է, տարրի բարձրությունը կհաշվարկվի կախված տեքստի քանակից:

Շարահյուսություն

cssընտրիչ {
  min-height: արժեք;
}

Օրինակ

Այս օրինակում բարձրությունը ընդհանրապես սահմանված չէ և կհաշվարկվի բրաուզերի կողմից ինքնուրույն՝ կախված տեքստի քանակից: Սակայն, քանի որ սահմանված է min-height հատկությունը, ապա բարձրությունը այս արժեքից ավելի փոքր չի դառնա, նույնիսկ եթե դրանում տեքստ ընդհանրապես չլինի:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Օրինակ

Ավելացնենք տարրին ավելի շատ տեքստ - այնպես, որ տեղի ունենա բլոկի բարձրության գերազանցում: Այս դեպքում մեր բլոկը պարզապես կմեծացնի իր բարձրությունը:

html<div id="elem">
  some long text
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Օրինակ

Համեմատության համար տեսնենք, թե ինչ կլինի բլոկի հետ, եթե հանենք նվազագույն բարձրությունը, և դրա փոխարեն նշենք height հատկությունը:

html<div id="elem">
  some long text
</div>

css#elem {
  height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
  margin-bottom: 50px;
}

Результат:

Տես նաև