height: 100vh và hàm cacl()

Tùy chọn CSS này có thể đưa vào div "tổng quản", tức div master chứa tất cả các thành phần con. Khi đặt height: 100vh, tức ta muốn div này chiếm toàn bộ chiều cao của không gian vh ở đây là viewpoint height và 100% tức chiếm toàn bộ.

Giả sử nếu ta thiết lập height: 50vh; thì khi chiều cao màn hình là 1000px thì chiều cao của khối div chúng ta đang thiết lập sẽ là 500px.

Hàm CALC giúp chúng ta tính toán và thiết lập chiều cao cho một element nào đó. Thông thường code sẽ là height: calc(100% - 100px); trong đó ta sẽ lấy hiệu số của 100% trừ đi 100px. Kết quả là, nếu chiều cao màn hình là 1000px, chiều cao của element đó sẽ là 900px.

Về cơ bản hàm calc() cho phép tính toán cộng trừ nhân chia. Một trong số những cách dùng khá phổ biến là height: calc(100vh - 100px);.

Chú ý rằng hàm calc() có thể áp dụng với nhiều thuộc tính CSS khác. Ví dụ code sau: width: calc(100% - 100px); sẽ tính toán để element hiện tại có chiều ngang giảm đi 200px so với chiều ngang của toàn màn hình. Lúc đó, nếu ta gán thêm position: absolute; left: 50px thì div hiện tại sẽ cách hai bên mỗi bên 50px.