Làm thế nào để độ cao của bảng đạt 100% kích thước cửa sổ

Đây là một vấn đề gặp khá phổ biến đối với người làm HTML. Độ cao của bảng không mở rộng 100% như mong muốn ngay cả khi ta đã thiết lập style của bảng như sau:

Thực tế với đoạn code trên khi xem trên trình duyệt, bảng khong hề phủ đầy 100% kích thước của màn hình trình duyệt như mong muốn.

Vậy tại sao vấn đề này xảy ra:

• Khi thiết lập height của table là 100%, thì table sẽ phủ đầy 100% diện tích có thể về chiều cao của đối tượng chứa nó. Nếuđói trượng chứa nó không chiếm 100% kích thước trình duyệt thì table cũng không thể làm thế.

Như vậy để giải quyết vấn đề này ta cần làm như sau:

• Thiết lập cho đối tượng chứa table phải chiếm 100% diện tích trình duyệt.

Vậy thực tế nếu muốn table có chiều cao bằng chiều cao toàn bộ trình duyệt ta phải làm như sau:

.....

....

html, body {
      height: 100%;
}