CSSheight: 100%= 100% chiều cao của phần tử cha. Cha phải có chiều cao xác định, nếu không giá trị này bị bỏ qua — đó là lý do phải chuỗihtml, body { height: 100% }.100vh= 100% chiều cao viewport, không phụ thuộc cha.100dvh= viewport động: co giãn theo thanh địa chỉ của trình duyệt mobile khi nó ẩn/hiện.
Lỗi kinh điển trên mobile: trên iOS Safari và Chrome Android, 100vh được tính theo viewport lớn nhất (khi thanh địa chỉ đã ẩn). Lúc thanh địa chỉ còn hiện, phần tử cao 100vh vượt quá vùng nhìn thấy, đẩy nút hoặc footer xuống dưới mép màn hình và tạo thanh cuộn thừa.
Bộ đơn vị mới: svh (viewport nhỏ nhất — an toàn nhất), lvh (lớn nhất, tương đương vh cũ), dvh (động). Tương tự có svw/lvw/dvw và biến thể -min/-max.
css
.screen {
min-height: 100vh; /* fallback cho trình duyệt cũ */
min-height: 100dvh; /* ghi đè khi được hỗ trợ */
}Lưu ý dvh thay đổi liên tục khi cuộn → tránh dùng cho phần tử có transition chiều cao (gây giật).
Với sheet/modal cố định nên chọn svh để không bao giờ tràn.