Хосияти 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;
}

Результат:

Ҳамчунин нигаред