svh, lvh và dvh là các đơn vị chiều cao trong CSS được sử dụng để xác định kích thước phần tử dựa trên chiều cao của viewport (khu vực hiển thị của trình duyệt). Chúng thuộc nhóm đơn vị viewport, cùng với vw (viewport width), nhưng khác nhau về cách tính toán chiều cao. Việc hiểu rõ sự khác biệt giữa chúng rất quan trọng để thiết kế website responsive, đặc biệt trên thiết bị di động.
vh (viewport height): Ban đầu, vh được định nghĩa là 1% chiều cao của viewport ban đầu. Tuy nhiên, trên thiết bị di động, giao diện người dùng (UI) của trình duyệt có thể thay đổi kích thước khi cuộn trang, dẫn đến sự không nhất quán trong việc tính toán chiều cao. Hiện tại, vh thường được tính toán dựa trên chiều cao viewport lớn nhất, tức là khi UI trình duyệt bị thu nhỏ tối đa. Điều này có thể gây ra hiện tượng nội dung bị tràn ra khỏi màn hình khi UI trình duyệt ở kích thước lớn hơn.
lvh (large viewport height): lvh được định nghĩa là 1% chiều cao của viewport lớn nhất, tương tự như cách vh hoạt động hiện tại. lvh hữu ích khi bạn muốn phần tử luôn có chiều cao bằng với chiều cao viewport tối đa, bất kể kích thước của UI trình duyệt.
svh (small viewport height): svh được định nghĩa là 1% chiều cao của viewport nhỏ nhất, tức là khi UI trình duyệt mở rộng tối đa. svh cho phép bạn thiết kế phần tử có chiều cao vừa đủ lấp đầy màn hình, kể cả khi UI trình duyệt chiếm diện tích lớn. Sử dụng svh giúp tránh tình trạng nội dung bị che khuất bởi UI trình duyệt.
dvh (dynamic viewport height): dvh được định nghĩa là 1% chiều cao viewport động, nghĩa là chiều cao được tính toán liên tục dựa trên kích thước viewport hiện tại, kể cả khi UI trình duyệt thay đổi. Mặc dù dvh có vẻ lý tưởng để nội dung luôn vừa khớp với viewport, nhưng việc thay đổi kích thước liên tục có thể gây ra trải nghiệm giật lag cho người dùng và ảnh hưởng đến hiệu năng. Do đó, nên hạn chế sử dụng dvh trừ khi thật sự cần thiết. Nó có thể gây ra hiện tượng nội dung bị nhảy hoặc thay đổi kích thước đột ngột khi người dùng cuộn trang.
Tóm lại, svh và lvh cung cấp cách tiếp cận ổn định hơn để xác định chiều cao dựa trên viewport, trong khi dvh nên được sử dụng một cách thận trọng. Việc lựa chọn đơn vị phù hợp phụ thuộc vào mục đích thiết kế và trải nghiệm người dùng mong muốn. lvh giữ nguyên kích thước, svh co lại theo UI trình duyệt, còn dvh thay đổi kích thước liên tục.
