Hỗ trợ trực tuyến
Phần mềm - Mr Quang
SĐT: 0914425708
Website - Ms Hạnh
SĐT: 0981329148

054 3822725

contact@huesoft.com.vn
Thiết kế website
Software
Mobile Soft
Tư vấn thiết kế
Cổng thông tin Khách sạn Thừa Thiên Huế

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ế  web 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    

Cột trái


2    
Cột giữa


3    

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

1.     Sử dụng phương pháp .height() trong jQuery để lấy kích thước của 3 cột

2.     Từ 3 kích thước trên ta tìm được cột có chiều cao lớn nhất (max_height)

3.     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ẻ của trang web chúng ta viết code jQuery như sau

01    

02    



Highlandsoft.com.vn _nguồn sưu tầm