Właściwość min-height

Właściwość min-height ustawia minimalną wysokość elementu. Wartością właściwości są dowolne jednostki wymiarów lub słowo kluczowe none, oznaczające brak wartości.

Zwykle jest ustawiana dla elementu o płynnej szerokości (wysokość podana w procentach lub w ogóle nieustawiona, a element rozszerza się na wysokość w zależności od swojej zawartości).

Jeśli ustawiona jest minimalna wysokość - element nie może stać się niższy niż ta wysokość. Jeśli tekstu jest mniej niż potrzeba dla min-height, element będzie miał wysokość min-height.

Jeśli tekstu jest więcej - wysokość elementu zostanie obliczona w zależności od ilości tekstu.

Składnia

selektor {
	min-height: wartość;
}

Przykład

W tym przykładzie wysokość nie jest w ogóle ustawiona i zostanie obliczona samodzielnie przez przeglądarkę w zależności od ilości tekstu. Jednakże, ponieważ ustawiona jest właściwość min-height, wysokość nie zmniejszy się poniżej tej wartości, nawet jeśli w środku nie będzie w ogóle tekstu:

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

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

Przykład

Dodajmy elementowi więcej tekstu - tak, aby nastąpiło przepełnienie bloku po wysokości. W tym przypadku nasz blok po prostu zwiększy swoją wysokość:

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

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

Przykład

Dla porównania zobaczmy, co się stanie z blokiem, jeśli usuniemy mu minimalną wysokość, a zamiast tego ustawimy właściwość height:

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

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

Zobacz też

właściwość max-height,
która ustawia maksymalną wysokość elementu
właściwość max-width,
która ustawia maksymalną szerokość elementu
właściwość min-width,
która ustawia minimalną szerokość elementu