Proprietatea min-height
Proprietatea min-height stabilește
înălțimea minimă a unui element. Valoarea proprietății
poate fi orice unitate
de măsură pentru dimensiuni sau cuvântul cheie none,
care indică absența unei valori.
De obicei, este setată pentru un element cu lățime variabilă (înălțimea este stabilită în procente sau nu este stabilită deloc, iar elementul își modifică înălțimea în funcție de conținut).
Dacă este stabilită o înălțime minimă - elementul nu va putea
deveni mai mic decât această înălțime. Dacă
textul este mai puțin decât este necesar pentru min-height,
elementul va avea înălțimea min-height.
Dacă textul este mai mult - înălțimea elementului va fi calculată în funcție de cantitatea de text.
Sintaxă
selector {
min-height: valoare;
}
Exemplu
În acest exemplu, înălțimea nu este stabilită deloc
și va fi calculată de browser în mod independent
în funcție de cantitatea de text. Cu toate acestea,
deoarece este setată proprietatea min-height,
înălțimea nu va scădea sub această valoare,
chiar dacă nu va fi text în el:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
}
:
Exemplu
Să adăugăm elementului mai mult text - astfel încât să se producă depășirea blocului în înălțime. În acest caz, blocul nostru pur și simplu își va mări înălțimea:
<div id="elem">
some long text
</div>
#elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Exemplu
Pentru comparație, să vedem ce se va întâmpla
cu blocul, dacă îi eliminăm înălțimea minimă,
și în locul ei setăm proprietatea height:
<div id="elem">
some long text
</div>
#elem {
height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
margin-bottom: 50px;
}
:
Vezi și
-
proprietatea
max-height,
care stabilește înălțimea maximă a elementului -
proprietatea
max-width,
care stabilește lățimea maximă a elementului -
proprietatea
min-width,
care stabilește lățimea minimă a elementului