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
-
gdy element HTML jest elementem dzieckiem elementu HTML typu flex lub inline-flex oraz gdy element HTML typu flex lub inline-flex posiada wierszowy kierunek układania się dla elementów dzieci, wtedy automatyczny rozmiar wysokości obszaru zawartości elementów dzieci ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości stretch, natomiast gdy element HTML typu flex lub inline-flex posiada kolumnowy kierunek układania się dla elementów dzieci, wtedy automatyczny rozmiar wysokości obszaru zawartości elementów dzieci ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości fit-content
-
gdy element HTML jest elementem HTML należącym do siatki elementu HTML typu grid lub inline-grid, wtedy automatyczny rozmiar wysokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości fit-content, chyba że wartość właściwości align-self danego elementu HTML wskazuje na wartość stretch, wtedy automatyczny rozmiar wysokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości stretch
-
niezależnie od wszystkich wyżej wymienionych zasad, gdy element HTML posiada pozycję absolute lub pozycję fixed, wtedy automatyczny rozmiar wysokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości fit-content, ponadto gdy element HTML posiada właściwość top wraz z wartością różną od wartości auto oraz właściwość bottom wraz z wartością różną od wartości auto, wtedy automatyczny rozmiar wysokości obszaru zawartości elementu HTML dodatkowo może zostać rozciągnięty względem górnej oraz dolnej krawędzi obszaru pozycjonowania
-
w każdym innym przypadku automatyczny rozmiar wysokości obszaru zawartości elementu HTML najczęściej dopasowuje się do ilości posiadanej treści do wyświetlenia przez dany element HTML
Gdy automatyczny rozmiar wysokości elementu HTML w jakikolwiek sposób uzależniony jest od posiadanej treści do wyświetlenia przez ten element HTML, wtedy rozmiar wysokości siatki elementu HTML typu grid lub inline-grid może również wpłynąć na finalnie ustalony przez przeglądarkę internetową automatyczny rozmiar wysokości tego elementu HTML.
height:auto;
rozmiar wysokości obszaru zawartości tego elementu "div" został automatycznie określony przez przeglądarkę internetową
<!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>
rozmiar wysokości obszaru zawartości tego elementu "div" został automatycznie określony przez przeglądarkę internetową
</div>
</body>
</html>
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"
<!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:#7DCDE8;
}
</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>
Za pomocą wartości stretch właściwości height możemy sprawić, że rozmiar wysokości obszaru zawartości interesującego nas elementu HTML zostanie rozciągnięty wzdłuż rozmiaru wysokości wolnej przestrzeni obszaru, do którego należy ten element HTML.
height:stretch;
Rozmiar wysokości obszaru zawartości przykładowego elementu "div#dziecko" został rozciągnięty wzdłuż rozmiaru wysokości wolnej przestrzeni obszaru zawartości przykładowego elementu "div#rodzic", ponieważ do wspomnianego elementu "div#dziecko" została dodana właściwość "height" wraz z wartością "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 {
height:150px;
padding:1em;
font-size:1.3em;
background-color:red;
}
#dziecko {
height:stretch;
height:-moz-available;
height:-webkit-fill-available;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div id="rodzic">
<div id="dziecko">div#dziecko</div>
</div>
</body>
</html>
Za pomocą wartości min-content właściwości height możemy sprawić, że 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.
height:min-content;
ABCD EFGHIJK LM NOP QRSTU V WXYZ
Rozmiar wysokości obszaru 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ść "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;
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 height możemy sprawić, że 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.
height:max-content;
ABCD EFGHIJK LM NOP QRSTU V WXYZ
Rozmiar wysokości obszaru 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ść "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;
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 height możemy sprawić, że wartością 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.
height:fit-content;
div#rodzic
DIV#DZIECKO ABCD EFGHIJK LM NOP QRSTU V WXYZ
Wartością rozmiaru wysokości obszaru 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ść "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 {
height:fit-content;
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>
