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:
<div id="left">Cột trái</div> <div id="center">Cột giữa</div> <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:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var max_height = 0;
//Duyệt qua 3 cột để lấy kích thước của cột lớn nhất
$("#left,#center,#right").each(function(){
if($(this).height() > max_height)
max_height = $(this).height();
});
//Gán độ cao 3 cột theo giá trị max_height
$("#left,#center,#right").height(max_height);
});
</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, 1,769 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ự
Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter 
Đinh Văn Phường (4)
Nguyen Van Than (2)
Ban xe dap the thao (1)
Bùi Văn Thiêm (1)
{ 27 comments… read them below or add one }
Cái này hơi lạ, có nhất thiết phải dùng jquery không, còn có nhiều cách khác đơn giản hơn mà ?
HHV thử ví dụ xem??
Vấn đề không phải là tạo cho 3 cột có chiều cao bằng nhau mà vấn đề là để cho các thành phần khác không tràn lên… nếu chỉ để 3 cột không tràn lên thì chỉ dùng một dòng <div style=’clear: both;’> là ổn tho
Mình đã nói rất rõ, mục đích của bài này là tạo ra một Layout 3 cột có chiều cao bằng nhau, chiều cao của các cột được tự động căn đều bằng chiều cao của cột có nhiều nội dung nhất. Có lẽ HHV không hiểu ý của mình.
chuẩn. 2 vấn đề hoàn toàn # nhau. code jQ đơn giản và khắc phục hoàn hảo, cột giả nghe quá thủ công. Thanks!
nếu bạn nào chưa gặp trường hợp này thì chưa thể biết bài này có ích thế nào đâu :V
Chào bạn,
Mình không hiểu mục đích của bạn, tạo sao phải làm như thế này nhỉ ?
Mục đích là 3 cột của layout luôn có chiều cao bằng nhau bạn ah, 2 cột còn lại sẽ được tự động căn theo cột có nhiều nội dung nhất.
Đồng ý với TC, vấn đề là để làm gì? Tất nhiên là 3 cột bằng chiều cao bằng nhau. Nhưng bắt buộc 3 cột bằng chiều cao để làm gì?
Sao các bạn lại không hiểu nhỉ? Mục đích là khi website của bạn dùng border hoặc ảnh nền cho các cột, nếu chiều cao không bằng nhau nhìn sẽ rất xấu, phần nội dung có độ cao lớn hơn các cột còn lại thì nó sẽ tự cân bằng chiều cao các cột này.
Cảm ơn tác giả bài viết, mình đang cần cái này!
tôi cũng đă làm 1 dự án hộ bạn người ta đòi phải tạo 3 cột bằng nhau.nói chung khách hàng bảo làm gì thì làm như thế. Bài này rất hữu ích đấy
Cám ơn bạn.
Khách hàng là thượng đế mà, có những yêu cầu ngược đời kinh khủng, tư vấn mãi không được, cuối cùng thì mình vẫn phải làm.
Cảm ơn bạn đã ghé thăm!
chờ dài cổ mà chẳng có Tut PHP nào của PT
Cái này hay ghê em cũng vừa áp dụng cái này cho web của em nè
Lâu lắm rồi không có bài mới nha bác
)
Dạo này bận quá HHV ah, chắc phải một thời gian ngắn nữa mới tiếp tục quay lại viết bài được!
Mình cũng đã từng khúc mắc vấn đề này và chưa tìm ra hướng giải quyết! rất vui khi bạn đã chia sẽ ! cám ơn nhiều !
Bài viết hay, cũng coi như 1 demo về jquery. A peter trần đã nói rõ là do có thể gặp yêu cầu của khách mà. Mục đích thì phải hỏi những vị khách đó.
Cảm ơn bạn. mình cũng đang thắc mắc về cách làm thế nào cho nó auto bằng nhau. hôm nọ đi phỏng vấn nó hỏi cái này mình tịt. biết hơi muộn nhưng vẫn thấy thích. tks bạn
nghe moi ng khen qua, mình thu lam xem the nao
cho mình hỏi là cái jquery làm chạy chạy như cái Featured Products của trang web này http://www.flexiblewebdesign.com/virtuemart-2-template-fashionmart/ là ji dc ko?
Cái này bạn có thể dùng jcarousel
hay, bai cua biter trân hay, ma lai dễ hiểu ban bost tiếp cach viết css cho menu di
bài viết rất hay, cảm ơn bạn nhiều
hi PT,
Canh đều các cột dùng Js hay Jquery nói chung là ổn, nhưng nhứt đầu nhất là phải làm sao cho nó chạy cross browser và trong nhiều tình huống khác nhau. và em dang đau đầu tìm gp:
- Nếu dùng js thì khi browser tăt js làm sao chạy.
- Nếu dùng CSS thì lại ko cross browser (vd dùng display : table, table-cell).
- code phải đơn giản, ko dc thêm nhiều vào source sẵn có.
Hi, mong PT & a/e nào biết làm equal height = pure css mà cross browser thì gợi ý cho em với.
(đã tham khảo bài của pác hồng kông yelotofu, nhưng khi test thì ok, khi apply vào project thì điếc).
Thú vị đấy, cái này phải coi lại mới được.
Nói chung làm giao diện 3 cột không phải là khó nếu sử dụng js hay là thuần làm bằng background. Làm bằng js thì rễ dàng và tùy biến hơn là background. Nhưng cái nào cũng có ưu và nhược điểm của nó.
Mình cũng đã làm rất nhiều nên phải bỏ cách làm bằng Js vì nếu trang được load bình thường thì không sao. Nhưng nếu trang được load bằng ajax thì phải gọi hàm tính toán lại chiều cao của nó. nếu không sẽ bị tràn dữ liệu hay thiếu dữ liệu.