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

cssselektor {
  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:

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

css#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ść:

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

css#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:

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

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

Результат:

Zobacz też