Để phần tử chiếm toàn bộ chiều cao viewport, cần set height: 100% cho cả html và body, hoặc dùng đơn vị vh.
Ví dụ mã nguồn
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
.fullHeight {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
background: rgb(135, 27, 207);
color: white;
font-size: 40px;
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
</head>
<body>
<div class="fullHeight">Div này sẽ kéo dãn toàn bộ chiều cao và rộng cửa sổ</div>
</body>
</html>
Các phương pháp
| Phương pháp | CSS | Ưu/nhược điểm |
|---|---|---|
| html,body height:100% | html,body{height:100%} .el{height:100%} | Cổ điển, cần reset margin, cascading |
| Viewport units | .el { height: 100vh; } | Đơn giản, không phụ thuộc cha. Cẩn thận mobile address bar |
| Flexbox | body{display:flex; min-height:100vh} .el{flex:1} | Linh hoạt, nội dung căn giữa dễ |
| Grid | body{display:grid; min-height:100vh} .el{height:100%} | Tốt cho layout phức tạp |
Vấn đề 100vh trên Mobile
Trên mobile, thanh địa chỉ (address bar) ẩn/hiện làm thay đổi viewport height. 100vh tính theo viewport LỚN NHẤT (address bar ẩn), gây tràn khi address bar hiện.
Giải pháp hiện đại
/* CSS Custom Properties - cập nhật bằng JS */
:root { --vh: 1vh; }
body { height: 100vh; height: calc(var(--vh, 1vh) * 100); }
/* Hoặc dùng đơn vị mới (Chrome 108+, Safari 15.4+) */
.el { height: 100dvh; } /* Dynamic viewport height */
.el { height: 100svh; } /* Small viewport height (address bar hiện) */
.el { height: 100lvh; } /* Large viewport height (address bar ẩn) */