max-height

Wartość none jest domyślną wartością właściwości max-height.

Domyślnie element HTML nie posiada określonego maksymalnego rozmiaru wysokości obszaru zawartości.

  max-height:none;

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

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

      div {
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" nie posiada określonego maksymalnego rozmiaru wysokości obszaru zawartości
    </div>

  </body>
</html>

Za pomocą właściwości max-height oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić maksymalny 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

gdy dany element HTML jest elementem HTML należącym do siatki elementu HTML tworzącego układ siatki, wtedy wartości procentowe liczone są względem aktualnego rozmiaru znajdującego się pomiędzy początkową krawędzią wierszową, a końcową krawędzią wierszową miejsca, do którego został przypisany dany element HTML

Dla zaawansowanych

w pierwszym z wymienionych przypadków 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ść max-height wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative

  max-height:75px;

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

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

      div {
        width:350px;
        max-height:75px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      maksymalny rozmiar wysokości, jaki może posiadać obszar zawartości tego elementu "div" wynosi 75 pikseli, ponieważ do tego elementu "div" została dodana właściwość "max-height" wraz z wartością "75px"
    </div>

  </body>
</html>

Za pomocą wartości stretch właściwości max-height możemy sprawić, że maksymalny rozmiar wysokości obszaru zawartości interesującego nas elementu HTML uzależniony będzie od rozmiaru wysokości wolnej przestrzeni, jaka pozostała wzdłuż obszaru, do którego należy ten element HTML.

  max-height:stretch;

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

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

      #rodzic {
        width:350px;
        height:100px;
        padding:1em;
        font-size:1.3em;
        background-color:red;
      }

      #dziecko {
        max-height:stretch;
        max-height:-moz-available;
        max-height:-webkit-fill-available;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="dziecko">
        maksymalny rozmiar wysokości, jaki może posiadać obszar zawartości tego elementu "div#dziecko" uzależniony jest od rozmiaru wysokości wolnej przestrzeni, jaka pozostała wzdłuż obszaru zawartości przykładowego elementu "div#rodzic", ponieważ do wspomnianego elementu "div#dziecko" została dodana właściwość "max-height" wraz z wartością "stretch"
      </div>
    </div>

  </body>
</html>

Za pomocą wartości min-content właściwości max-height możemy sprawić, że maksymalny rozmiar wysokości obszaru zawartości interesującego nas elementu HTML uzależniony będzie od najszerszej pojedynczej posiadanej treści do wyświetlenia przez ten element HTML.

Informacje dodatkowe

gdy rozmiar wysokości elementu HTML nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu HTML, czyli na osi liniowej, wtedy wartość min-content działa na takiej samej zasadzie, jak wartość none

  max-height:min-content;

Maksymalny rozmiar wysokości, jaki może posiadać obszar zawartości przykładowego elementu "div" uzależniony jest od najszerszej pojedynczej posiadanej treści do wyświetlenia przez przykładowy element "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "max-height" wraz z wartością "min-content" (w tym wypadku wspomnianą treścią jest ciąg znaków "EFGHIJK").

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

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

      div {
        writing-mode:vertical-rl;
        max-height:min-content;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ABCD EFGHIJK LM NOP QRSTU V WXYZ
    </div>

  </body>
</html>

Za pomocą wartości max-content właściwości max-height możemy sprawić, że maksymalny rozmiar wysokości obszaru zawartości interesującego nas elementu HTML uzależniony będzie od możliwie najszerszej posiadanej treści do wyświetlenia przez ten element HTML.

Informacje dodatkowe

gdy rozmiar wysokości elementu HTML nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu HTML, czyli na osi liniowej, wtedy wartość max-content działa na takiej samej zasadzie, jak wartość none

  max-height:max-content;

Maksymalny rozmiar wysokości, jaki może posiadać obszar zawartości przykładowego elementu "div" uzależniony jest od możliwie najszerszej posiadanej treści do wyświetlenia przez przykładowy element "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "max-height" wraz z wartością "max-content" (w tym wypadku wspomnianą treścią jest ciąg znaków "ABCD EFGHIJK LM NOP QRSTU V WXYZ").

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

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

      div {
        writing-mode:vertical-rl;
        max-height:max-content;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ABCD EFGHIJK LM NOP QRSTU V WXYZ
    </div>

  </body>
</html>

Za pomocą wartości fit-content właściwości max-height możemy sprawić, że wartością maksymalnego rozmiaru wysokości obszaru zawartości interesującego nas elementu HTML będzie możliwie największa wartość mieszcząca się w zakresie wartości od min-content do max-content.

W tym wypadku wartość większa od wartości min-content nie może powodować przepełnienia.

W tym wypadku rozmiarem wysokości obszaru zawartości elementu HTML reprezentującego treść zewnętrzną (plik graficzny, plik audio, plik video itp.) będzie rozmiar, na który wskazuje wartość min-content, ponadto rozmiar ten może zostać dodatkowo równomiernie przeskalowany na podstawie posiadanej przez element HTML wartości właściwości width.

Informacje dodatkowe

gdy rozmiar wysokości elementu HTML nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu HTML, czyli na osi liniowej, wtedy wartość fit-content działa na takiej samej zasadzie, jak wartość none

  max-height:fit-content;

Wartością maksymalnego rozmiaru wysokości, jaki może posiadać obszar zawartości przykładowego elementu "div#dziecko" jest możliwie największa wartość mieszcząca się w zakresie wartości od "min-content" do "max-content" oraz niepowodująca przepełnienia rozmiaru wysokości obszaru zawartości przykładowego elementu "div#rodzic", ponieważ do wspomnianego elementu "div#dziecko" została dodana właściwość "max-height" wraz z wartością "fit-content".

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

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

      #rodzic {
        writing-mode:vertical-rl;
        height:200px;
        padding:1em;
        font-size:1.3em;
        background-color:red;
      }

      #dziecko {
        max-height:fit-content;
        max-height:-moz-fit-content;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      div#rodzic
      <div id="dziecko">
        DIV#DZIECKO ABCD EFGHIJK LM NOP QRSTU V WXYZ
      </div>
    </div>

  </body>
</html>