Thuộc tính height trong CSS
Trần Thị Vân - 1263
- 12/07/2025
Chức năng của Thuộc tính height trong CSS
Thuộc tính height trong CSS dùng để quy định chiều cao của các phần tử HTML như thẻ div, p, img,... bằng đơn vị px, phần trăm, auto, vh (chiều cao màn hình trình duyệt).
Cú pháp của Thuộc tính height trong CSS
height: giatri;
giatri: Giá trị để quy định chiều cao của phần tử HTML (Ví dụ: 100px, 80%, 100vh, auto,....)
Ý nghĩa của các đơn vị trong giá trị:
px: Quy định chiều cao của phần tử HTML bằng đơn vị px.
%: Quy định chiều cao của phần tử HTML bằng đơn vị % so với phần tử cha.
vh: Quy định chiều cao của phần tử HTML so với chiều cao màn hình trình duyệt, 80vh là 80% so với chiều cao màn hình trình duyệt.
auto: Chiều cao sẽ tự động co giãn theo nội dung trong phần tử HTML.
Ví dụ Thuộc tính height trong CSS
height:auto;
height:50px;
height:100px;
height:50%;
height:100%;
height:100vh (chiều cao màn hình trình duyệt)
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính height trong CSS</title>
<style>
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:24%; margin-right:1%; float:left;height:200px;border:1px solid red; margin-bottom:10px}
p{width:100%; margin:0px; padding:0px; background:green; color:#fff; padding:10px}
span {width:100%; float:left; height:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính height trong CSS</h1>
<span>Dùng để quy định chiều cao của các phần tử HTML như thẻ div, p, img,... bằng đơn vị px, phần trăm, auto, vh (chiều cao màn hình trình duyệt):
</span>
<div><p style="height:50px">height:50px</p></div>
<div><p style="height:100px">height:100px</p></div>
<div><p style="height:50%">height:50%</p></div>
<div><p style="height:100%">height:100%</p></div>
<div style="">
<p style="height:100vh">height:100vh (chiều cao màn hình trình duyệt)</p>
</div>
<div><p style="height:auto">height:auto</p></div>
</body>
</html>
Ứng dụng height CSS trong thiết kế giao diện
Thuộc tính height không chỉ dùng để đặt một con số cố định cho phần tử. Khi kết hợp với các thuộc tính giới hạn kích thước, nội dung bên trong và bố cục responsive, height giúp kiểm soát giao diện ổn định hơn trong nhiều tình huống thực tế.
Thiết lập chiều cao cố định cho phần tử
Khi cần một phần tử luôn có cùng chiều cao, có thể thiết lập giá trị cụ thể cho height. Cách này phù hợp với những thành phần có kích thước tương đối ổn định như khu vực biểu tượng, ô nhập liệu, nút hoặc một số khối giao diện.
.box {
height: 200px;
}
Tuy nhiên, không nên lạm dụng chiều cao cố định cho những khu vực chứa nội dung thay đổi. Nếu nội dung dài hơn không gian được thiết lập, phần tử có thể bị tràn và làm ảnh hưởng bố cục.
Kết hợp height với min-height và max-height
Trong giao diện thực tế, việc chỉ đặt height đôi khi chưa đủ linh hoạt. min-height giúp đảm bảo phần tử không thấp hơn mức cần thiết, trong khi max-height tạo giới hạn chiều cao tối đa.
.content {
height: 300px;
min-height: 200px;
max-height: 500px;
}
Cách kết hợp này phù hợp với các khu vực có lượng nội dung không cố định, giúp kích thước phần tử có giới hạn rõ ràng thay vì phụ thuộc hoàn toàn vào một giá trị chiều cao duy nhất.
Kiểm soát chiều cao khi nội dung thay đổi
Nếu nội dung có thể tăng giảm theo dữ liệu, việc đặt height cố định cần được cân nhắc. Một khối văn bản, danh sách sản phẩm hoặc nội dung được tải động có thể vượt quá chiều cao ban đầu.
Trong trường hợp này, nên ưu tiên cách thiết lập kích thước có khả năng thích ứng hoặc kết hợp giới hạn chiều cao phù hợp. Điều này giúp nội dung không bị che khuất và hạn chế tình trạng giao diện bị phá vỡ khi dữ liệu thực tế khác với dự kiến.
Ứng dụng height trong bố cục website responsive
Trên các thiết bị có kích thước màn hình khác nhau, một chiều cao cố định có thể không còn phù hợp. Vì vậy, height nên được sử dụng cùng các đơn vị tương đối hoặc các thuộc tính giới hạn kích thước khi xây dựng giao diện responsive.
.banner {
height: 40vh;
min-height: 240px;
max-height: 500px;
}
Cách này cho phép khu vực banner thay đổi theo chiều cao màn hình nhưng vẫn giữ được giới hạn hợp lý. Đây là hướng sử dụng phù hợp khi muốn giao diện Web Mới hiển thị cân đối trên cả máy tính và thiết bị di động.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính height trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
