Ostatnio edytowany:

max-height

Autor: Virtual Patriot

Opis właściwości max-height

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

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

przeznaczenie

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

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości max-height

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 7

Edge

tak

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

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

none

Opis

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.

Przykład

  max-height:none;
ten element "div" nie posiada określonego maksymalnego rozmiaru wysokości obszaru zawartości

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 {
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

rozmiar

Opis

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

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

Przykład

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

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 {
        max-height:50px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>