Làm cách nào để kéo dài một bảng HTML lên 100% chiều cao cửa sổ trình duyệt?

Question

Tôi đang sử dụng một bảng để thiết kế bố cục của trang web của tôi. Tôi muốn bảng điền vào trang ngay cả khi nó không chứa nhiều nội dung. Dưới đây là CSS Tôi đang sử dụng:

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container { 
    min-height: 100%; 
    width: 100%; 
} 

Và tôi đặt một cái gì đó như thế này trong mã trang:

<table id="container"> 
<tr> 
<td> 
... 

này làm việc cho Opera 9, nhưng không phải cho Firefox 2 hoặc Internet Explorer 7. có một cách đơn giản để làm cho giải pháp này làm việc cho tất cả các trình duyệt phổ biến?

(Thêm id="container"-td không giúp.)

Answer 1

Chỉ cần sử dụng height tài sản thay vì min-height tài sản khi thiết #container. Khi dữ liệu quá lớn, bảng sẽ tự động phát triển.

Answer 2

Hãy thử sử dụng này:

html, body { 
    height: 100%; 
} 

Vì vậy, bên cạnh việc làm cho chiều cao của bảng đến 100%, bạn cũng cần phải có để đảm bảo rằng các html'd và chiều cao cơ thể cũng là 100%, vì vậy nó sẽ kéo dài đúng .