Właściwość CSSModel pudełkowy
height
Ustawia wysokość elementu.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- wszystkie elementy poza liniowymi niezastępowanymi (np. `<span>`), wierszami i grupami wierszy tabel
- JavaScript
element.style.height = "120px"
Przykład
#CSS
.hero {
min-height: 160px;
display: grid;
place-items: center;
}HTML przykładu
<section class="hero stage">
<strong>Zacznij naukę programowania</strong>
</section>Podgląd
Definicja i zastosowanie
#Właściwość height określa wysokość obszaru treści elementu. Domyślnie (auto) element jest dokładnie tak wysoki, jak jego zawartość, i to zwykle najlepsze ustawienie.
Wysokość w procentach działa tylko wtedy, gdy rodzic ma jawnie określoną wysokość. Jeśli wysokość rodzica zależy od treści, height: 50% zachowa się jak auto.
Sztywna wysokość bywa pułapką: gdy treści przybędzie (dłuższy tekst, większa czcionka użytkownika), wyjdzie ona poza element. Bezpieczniej użyć min-height.
Składnia
#Składnia
height: auto | <długość> | <procent> | min-content | max-content | fit-content;Wartości
#Wartości w praktyce
#auto
Wysokość wynika z treści.
.demo { height: auto; }100px
Stała wysokość.
.demo { height: 100px; }100%
Cała wysokość rodzica. Działa, bo rodzic w demo ma
height: 150px..demo { height: 100%; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Dla bloków z tekstem używaj
min-heightzamiastheight, żeby treść nie wychodziła poza element. - Jeśli
height: 100%nie działa, sprawdź, czy rodzic ma określoną wysokość.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.