Ostatnio edytowany:

min-height

Autor: Virtual Patriot

Opis właściwości min-height

Za pomocą właściwości min-height możemy określić minimalny rozmiar wysokości obszaru zawartości interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości min-height

przeznaczenie

element HTML tworzący blok treści, lecz nie element HTML typu table-column-group, table-column

Dodatkowo wartość auto przeznaczona jest wyłącznie dla elementów HTML posiadających właściwość overflow wraz z wartością visible oraz będących elementami dziećmi elementu HTML typu flex lub inline-flex.

pozycja

dowolna

dziedziczenie

nie

wartość initial

0 lub auto (gdy wartością właściwości overflow elementu HTML jest wartość visible oraz gdy element HTML jest elementem dzieckiem elementu HTML typu flex lub inline-flex)

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości min-height

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 7

Nie interpretuje wartości auto.

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości min-height

rozmiar

Opis

Za pomocą właściwości min-height oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić minimalny rozmiar wysokości obszaru zawartości interesującego nas elementu HTML.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości obszaru zawartości najbliższego powiązanego elementu przodka

Dla zaawansowanych

wartość procentowa nie może zostać obliczona przez przeglądarkę internetową, gdy finalny rozmiar wysokości obszaru zawartości wspomnianego elementu przodka jest nieznany

Sytuacje, gdy finalny rozmiar wysokości obszaru zawartości wspomnianego elementu przodka jest nieznany:

  • gdy element przodek posiada właściwość height wraz z wartością auto lub wartością wyrażoną za pomocą procentów, które nie mogą zostać obliczone przez przeglądarkę internetową, lecz tylko w sytuacji, gdy element HTML, do którego chcemy dodać właściwość min-height wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative

Przykład

  min-height:300px;
minimalny rozmiar wysokości obszaru zawartości tego elementu "div" wynosi 300 pikseli, ponieważ do tego elementu "div" została dodana właściwość "min-height" wraz z wartością "300px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        min-height:300px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      minimalny rozmiar wysokości obszaru zawartości tego elementu "div" wynosi 300 pikseli, ponieważ do tego elementu "div" została dodana właściwość "min-height" wraz z wartością "300px"
    </div>

  </body>
</html>

auto

Opis

Wartość auto jest domyślną wartością właściwości min-height elementów dzieci elementu HTML typu flex lub inline-flex.

Domyślnie minimalnym rozmiarem wysokości obszaru zawartości elementu dziecka elementu HTML typu flex lub inline-flex jest rozmiar określony przez rozmiar wysokości największej pojedynczej posiadanej treści do wyświetlenia przez dany element dziecko.

Gdy element dziecko elementu HTML typu flex lub inline-flex posiada właściwość overflow-y (lub overflow) wraz z wartością różną od wartości visible, wtedy wartość "auto" działa na takiej samej zasadzie jak wartość "0".

Przykład

  min-height:auto;
przykładowy element div - 1
div - 2
div - 3

Domyślnie minimalny rozmiar wysokości obszaru zawartości między innymi pierwszego elementu dziecka przykładowego elementu "div#flexbox" uzależniony jest od rozmiaru określonego przez rozmiar wysokości największej pojedynczej posiadanej treści do wyświetlenia przez wspomniany pierwszy element dziecko przykładowego elementu "div#flexbox" (w tym wypadku tą największą pojedynczą posiadaną treścią do wyświetlenia jest wyraz "przykładowy").

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        writing-mode:vertical-rl;
        -webkit-writing-mode:vertical-rl;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        flex-basis:50%;
      }

      #flexbox > :nth-child(1) {
        flex-shrink:10;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>przykładowy element div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>