Ostatnio edytowany:

height

Autor: Virtual Patriot

Opis właściwości height

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

Dodatkowe techniczne informacje o właściwości 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

auto

wyjątki initial

iframe, video, canvas

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości height

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

auto

Opis

Wartość auto jest domyślną wartością właściwości height.

Domyślnie element HTML posiada automatyczny rozmiar wysokości obszaru zawartości. Automatyczny rozmiar wysokości obszaru zawartości elementu HTML ustalany jest automatycznie przez przeglądarkę internetową na podstawie różnych czynników.

Sposoby ustalania przez przeglądarkę internetową automatycznego rozmiaru wysokości obszaru zawartości różnych elementów HTML

  • najczęściej automatyczny rozmiar wysokości obszaru zawartości elementu HTML dopasowuje się do ilości posiadanej treści do wyświetlenia przez dany element HTML

Przykład

  height:auto;
rozmiar wysokości obszaru zawartości tego elementu "div" został automatycznie określony przez przeglądarkę internetową

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>
      rozmiar wysokości obszaru zawartości tego elementu "div" został automatycznie określony przez przeglądarkę internetową
    </div>

  </body>
</html>

rozmiar

Opis

Za pomocą właściwości height oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić 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ść height wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative

Przykład

  height:300px;
rozmiar wysokości obszaru zawartości tego elementu "div" wynosi 300 pikseli, ponieważ do tego elementu "div" została dodana właściwość "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 {
        height:300px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>