Svojstvo min-height
Svojstvo min-height postavlja
minimalnu visinu elementa. Vrednost svojstva
su bilo koje jedinice
za veličine ili ključna reč none,
što znači odsustvo vrednosti.
Obično se zadaje za element sa promenjivom širinom (visina je data u procentima ili uopšte nije data, a element se po visini proširuje svojim sadržajem).
Ako je zadata minimalna visina - manje
od te visine element ne može da postane. Ako
ima manje teksta nego što je potrebno za min-height,
element će imati visinu min-height.
Ako je teksta više - visina elementa će se izračunati zavisno od količine teksta.
Sintaksa
selektor {
min-height: vrednost;
}
Primer
U ovom primeru visina uopšte nije postavljena
i birazer će je samostalno izračunati
zavisno od količine teksta. Međutim,
pošto je postavljeno svojstvo min-height,
visina manja od te vrednosti se neće smanjiti,
čak i ako teksta u njemu uopšte nema:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
}
:
Primer
Dodajmo elementu više teksta - tako da dođe do prekoračenja bloka po visini. U ovom slučaju naš blok će prosto povećati svoju visinu:
<div id="elem">
some long text
</div>
#elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Primer
Za poređenje, pogledajmo šta će biti
sa blokom ako mu uklonimo minimalnu visinu,
a umesto nje postavimo svojstvo height:
<div id="elem">
some long text
</div>
#elem {
height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
margin-bottom: 50px;
}
:
Vidite takođe
-
svojstvo
max-height,
koje zadaje maksimalnu visinu elementa -
svojstvo
max-width,
koje zadaje maksimalnu širinu elementa -
svojstvo
min-width,
koje zadaje minimalnu širinu elementa