Właściwość wysokości CSS
Przykład
Ustaw wysokość dwóch elementów <div>:
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość height
ustawia wysokość elementu.
Wysokość elementu nie obejmuje dopełnienia, obramowań ani marginesów!
Jeśli height: auto;
element automatycznie dostosuje swoją wysokość, aby jego zawartość była wyświetlana poprawnie.
Jeśli height
jest ustawiony na wartość liczbową (np. piksele, (r)em, procenty), to jeśli zawartość nie mieści się w określonej wysokości, zostanie przepełniona. Sposób, w jaki kontener będzie obsługiwał przepełnioną zawartość, jest określony przez
właściwość overflow .
Uwaga: właściwości min-height i
max-height zastępują
height
właściwość.
Domyślna wartość: | automatyczny |
---|---|
Dziedziczny: | nie |
Animowalny: | tak. Przeczytaj o animacji |
Wersja: | CSS1 |
Składnia JavaScript: | obiekt .style.height="500px" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Składnia CSS
height: auto|length|initial|inherit;
Wartości nieruchomości
Value | Description | Play it |
---|---|---|
auto | The browser calculates the height. This is default | |
length | Defines the height in px, cm, etc. Read about length units | |
% | Defines the height in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Ustaw wysokość elementu na 50% wysokości elementu rodzica:
#parent {
height: 100px;
}
#child {
height: 50%;
}
Powiązane strony
Samouczek CSS: wysokość i szerokość CSS
Samouczek CSS: model Box CSS
Odniesienie CSS: właściwość szerokości
Odniesienie HTML DOM: właściwość wysokości