Thuộc tính chiều cao CSS
Ví dụ
Đặt chiều cao của hai phần tử <div>:
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính height
thiết lập chiều cao của một phần tử.
Chiều cao của một phần tử không bao gồm phần đệm, đường viền hoặc lề!
Nếu height: auto;
phần tử sẽ tự động điều chỉnh chiều cao của nó để cho phép nội dung của nó được hiển thị chính xác.
Nếu height
được đặt thành một giá trị số (như pixel, (r)em, tỷ lệ phần trăm) thì nếu nội dung không vừa với chiều cao đã chỉ định, nó sẽ tràn. Cách vùng chứa xử lý nội dung tràn được xác định bởi thuộc tính tràn .
Lưu ý: Thuộc tính chiều cao tối thiểu và chiều cao tối đa ghi đè thuộc tính height
.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS1 |
Cú pháp JavaScript: | đối tượng .style.height="500px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Cú pháp CSS
height: auto| length |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | The browser calculates the height. This is default | Demo ❯ |
length | Defines the height in px, cm, etc. Read about length units | Demo ❯ |
% | Defines the height in percent of the containing block | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Đặt chiều cao của phần tử thành 50% chiều cao của phần tử cha:
#parent {
height: 100px;
}
#child {
height: 50%;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Chiều cao và chiều rộng CSS
Hướng dẫn CSS: Mô hình CSS Box
Tham chiếu CSS: thuộc tính chiều rộng
Tham chiếu DOM HTML: thuộc tính chiều cao