Cân bằng chiều cao tự động cho thẻ div

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Bài toán cần giải quyết

Ta có box A và box B có chiều cao co giãn theo chiều cao dữ liệu từng box, nếu dữ liệu trong box A nhiều hơn box B thì chiều cao của 2 box sẽ khác nhau. Cấu trúc HTML của hai box thường là div thì không có mối liên hệ giữa hai div, nên không thể làm cho chiều cao của box này có liên hệ đến chiều cao của box kia để tự động điều chỉnh chiều cao cho bằng nhau.

Source HTML:

<div id="news">
 <div class="sport-news">John Brewin watched a Mesut Ozil-inspired Germany book a second round date with old rivals England.</div>
 <div class="hot-news">Julia Gillard has become Australia's first female prime minister after Kevin Rudd stood aside at the last minute in Canberra Thursday morning before a leadership ballot.</div>
</div>

Bài viết giả định người đọc hiểu rõ lý do tại sao không nên dùng table để làm cấu trúc 2 box A và B, mà chỉ có thể dùng div.

Ở đoạn code trên, thì box A sẽ là box tin thể thao (class="sport-news") còn box B sẽ là box tin nóng (class="hot-news"). Chúng ta thấy nội dung của chúng khác nhau và điều này sẽ dẫn tới chiều cao của chúng cũng sẽ khác nhau. Đoạn CSS sau là để thêm màu sắc cho từng box để thấy rõ sự khác biệt của chiều cao 2 box.

Source CSS:

div#news .sport-news { background: #ff0; float: left; padding: 10px; width: 180px; }
div#news .hot-news { background: #f00; float: left; padding: 10px; width: 180px; }

Kết quả:

Hướng giải quyết: Box hiển thị như table (display: table)

Tương thích: Cách làm này không áp dụng được đối với IE (trừ IE8 cài mới trở đi), ngay cả bản IE8 được upgrade từ IE7 cũng không hỗ trợ. Xem The display declaration » display:table để biết danh sách các trình duyệt hỗ trợ khai báo display:table.

Chúng ta có thể vay mượn các thuộc tính của table về cho các box của chúng ta bằng cách khai báo display: table để biến box thành một table, display: table-row để biến box thành một tr, và display: table-cell để biến box thành một td.

Đối với thẻ (table), trên cùng một hàng (tr), thì các ô (td) sẽ có chiều cao giống nhau. Như vậy cấu trúc HTML của chúng ta sẽ sửa lại theo hướng mà theo đó, chúng ta phải có cả table, tr và td.

Source HTML:

<div id="news" class="table clearfix">
 <div class="table-row">
  <div class="sport-news table-cell">John Brewin watched a Mesut Ozil-inspired Germany book a second round date with old rivals England.</div>
  <div class="hot-news table-cell">Julia Gillard has become Australia's first female prime minister after Kevin Rudd stood aside at the last minute in Canberra Thursday morning before a leadership ballot.</div>
 </div>
</div>

Trong bài viết thì box là nói về hiển thị vật lý (mắt thấy) của hai box A và B trong ví dụ, còn div là thẻ HTML được dùng để tạo ra hiển thị vật lý đó, vì vậy ý nghĩa của box và div được dùng tùy theo ngữ cảnh để hiểu, không mang ý nghĩa tương đồng và có ý nghĩa khác nhau trong ngữ cảnh khác nhau.

Chú thích:

1. Chúng ta thêm 1 div bao ngoài cho 2 box, để “xem” nó như là 1 tr.
2. Chúng ta thêm class="table" vào div news: Như vậy div news sẽ là table.
3. Chúng ta thêm class="table-row" vào div bao ngoài cho 2 box (div mà ta mới thêm vào): Như vậy div này sẽ là row.
4. Chúng ta thêm class="table-cell" vào 2 div sport-news và hot-news: Như vậy 2 div này sẽ là 2 cell nằm trên cùng một row.

Tiếp đến là CSS: Đầu tiên chúng ta bỏ float: left trong 2 box đi thì mới có thể khiến box chịu ảnh hưởng của thuộc tính display: table-cell

Source CSS:

div#news .sport-news { background: #ff0; padding: 10px; width: 180px; }
div#news .hot-news { background: #f00; padding: 10px; width: 180px; }

Tiếp đến, chúng ta thêm 3 class vào source CSS để apply các thuộc tính của table và các box của chúng ta:

Source CSS:

.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }

Kết quả:

Source Code đầy đủ:

Source HTML:

<div id="news" class="table clearfix">
 <div class="table-row">
  <div class="sport-news table-cell">John Brewin watched a Mesut Ozil-inspired Germany book a second round date with old rivals England.</div>
  <div class="hot-news table-cell">Julia Gillard has become Australia's first female prime minister after Kevin Rudd stood aside at the last minute in Canberra Thursday morning before a leadership ballot.</div>
 </div>
</div>

Source CSS:

div#news .sport-news { background: #ff0; padding: 10px; width: 180px; }
div#news .hot-news { background: #f00; padding: 10px; width: 180px; }

.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }