Giao diện Div 3 cột bằng nhau

Có rất nhiều bạn hỏi tôi về cách thiết kế Giao diện Div có 3 cột bằng nhau, tức là 2 cột còn lại luôn có chiều cao bằng chiều cao của cột nhiều nội dung nhất.

Để rõ hơn bạn vui lòng xem Demo Giao diện Div 3 cột

Bạn sẽ nhận thấy cột 2 (ở giữa) có chiều cao lớn nhất, chiều cao 2 cột còn lại thì nhỏ hơn. Vậy có cách nào để 3 cột luôn bằng nhau dù nội dung của trang web thế nào?

Trong thực tế ít khi nào chúng ta gặp những yêu cầu theo kiểu này, nhưng đôi khi khách hàng của bạn yêu cầu điều đó?

Phương pháp thực hiện

Trước đây có một phương pháp được đưa ra là Faux Columns (cột giả). Phương pháp này sử dụng một file hình làm nền để tạo thành cột giả. Thực tế thì cột này không tồn tại. Tìm hiểu về Faux Columns tại đây: http://www.alistapart.com/articles/fauxcolumns/

Nhưng cách này theo PT thấy rất nhiều hạn chế và khó sử dụng, vì bạn phải căn chỉnh và tính toán kích thước ảnh nền sao cho hợp lý. Hơn nữa bạn sẽ gặp khó khăn khi bo góc cho các cột.

Hôm nay tôi sẽ hướng dẫn bạn một phương pháp đó là sử dụng jQuery, phương pháp này cũng khá đơn giản và lại khắc phục được nhược điểm của phương pháp trên.

Mình sẽ không đề cập đến code HTML + CSS như thế nào để tạo nên giao diện div 3 cột như demo bạn thấy trên. Bạn có thể tìm hiểu vấn đề này trong bài viết Thiết kế giao diện với Div và CSS

Trong demo trên tôi có 3 thẻ div tương ứng với 3 cột như sau:

1<div id="left">Cột trái</div>

2<div id="center">Cột giữa</div>

3<div id="right">Cột phải</div>

Cách giải quyết vấn đề của chúng ta như sau:

Sử dụng phương pháp .height() trong jQuery để lấy kích thước của 3 cột
Từ 3 kích thước trên ta tìm được cột có chiều cao lớn nhất (max_height)
Sử dụng phương pháp .height(max_height) để gán độ cao cho 3 cột theo kích thước của cột lớn nhất

Trong thẻ <head> của trang web chúng ta viết code jQuery như sau:

01<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

02<script type="text/javascript">

03    $(document).ready(function(){

04     var max_height = 0;

05     //Duyệt qua 3 cột để lấy kích thước của cột lớn nhất

06     $("#left,#center,#right").each(function(){

07         if($(this).height() > max_height)

08          max_height = $(this).height();

09     });

10     //Gán độ cao 3 cột theo giá trị max_height

11     $("#left,#center,#right").height(max_height);

12    });

13</script>

Kết quả là chúng ta có Giao diện Div với 3 cột bằng nhau từ demo trên

Download Demo Giao diện div 3 cột bằng nhau (1.9 KiB, 10 Lượt tải)

Tôi hy vọng chút thủ thuật nhỏ này sẽ giúp ích được cho bạn nếu như bạn có gặp một yêu cầu tương tự

Tìm kiếm Blog này

công nghệ và cuộc sống