Độ cao của Div
- November 21, 2009
- 30 comments
Thiết kế giao diện hoàn toàn bằng CSS là cách hay nhất mà các designer có được cho đến lúc này. Nhưng đôi khi một số tính năng của CSS chưa đủ toàn diện để bao quát hết mọi mong muốn của người dùng. Chính vì vậy đôi khi chúng ta phải cậy nhờ đến jQuery để bù đắp vào những chỗ thiếu sót này.
Đây là Video đầu tiên của Clackken Smith hướng dẫn các bạn cách làm cho 2 cột Div có độ dài bằng nhau. Với kiểu nói chuyện hài hước và hướng dẫn chi tiết tỉ mỉ. Đảm bảo các bạn sẽ hiểu được nguyên lý một cách đơn giản và hiệu quả. Là Video đầu tiên cho nên cũng không tránh khỏi cảm giác bị “camaroon”. Izwebz cũng mong nhận được nhiều hơn sự đóng góp bài vở khác của các bạn.
Ngoài cách này ra, các bạn cũng có thể tham khảo thêm bài Faux Column để biết thêm một cách nữa sử dụng CSS phòng khi trình duyệt của người dùng không bật Javascript.
Thời lượng: 14:38
File download trong video: Fix Div Height
Download định dạng .mp4: Độ cao của Div
« Tabbed Navigation với jQuery & CSS
Cài đặt WordPress ở Localhost »
mình mới học được một cách khống chế chiều cao các đối tượng theo ý muốn, nôm na là chiều cao của đối tượng này có quan hệ với chiều cao của đối tượng kia, có thể bằng nhau, hoặc hơn kém nhau cái gì đó
nay chia sẽ cho bạn nào chưa biết, hi vong sẽ giúp các bạn một phần.
http://www.mediafire.com/download.php?p65d1dr8m3wf285
Cách này sử dụng height() jquery. Các bạn có thể xem chi tiết trong file heighDiv.html. mình đã chú thích rất kĩ rồi
Anh ơi em có 1 thắc mắc cũng liên quan tới thể div nhưng chưa biết giải quyết như thế nào. em mong rằng anh có thể bớt chút thời gian trả lời giúp em.
Hiện tai em đang viết 1 chat box bằng ajax nhưng em đang gặp rắc rồi ở phần thẻ . vì để giới hạn lại chiểu cao của chat box nên em có sử dụng thuộc tính “overflow: scroll” cho nó giống như khung chat box của yahoo. nhưng khi em tiến hành thủ nghiệm thì mọi việc diễn ra suôn sẽ chỉ có điều khi dữ liệu mới thêm vào thì nó không thể tự đây dữ liệu xuông phía dưới nên mỗi lần thêm dữ liệu vào khung chat box em phải kéo thanh trượt xuống phía dưới để xem. như vậy rất bất tiện. Em đã làm nhiều cách nhưng vẫn chưa được. Em mong rằng anh cho em 1 giải pháp để giải quyết vấn đề này. em cảm ơn
Hãy thử xài jquery ui hoặc http://api.jquery.com/scroll/
Cảm ơn bạn!
Video rất hay.
Bài viết hay lắm,thanks
Cái này hình như chèn hình vào là ko đc nữa a ơi
Có cách nào chèn hình vào mà vẫn đc ko ạ?
/Thanks các a vì 1 trang web hết sức bổ ích
cho mình hỏi vấn đề này với. cảm ơn
Bài này bạn viết hay lắm , nhưng run quá. Thank bạn nhiều nhe’.
Cám ơn. Bài này quá hay.
Sorry Clackken Smith vì post code dài khó hiểu quá. Tại vì mình copy code do trang ASP.Net sinh ra nên id và class lung tung cả, và code nó tạo ra động nên mình cũng không chú ý comment lúc nào kết thúc div nào.
Mình đã tự tìm hiểu và tìm ra được nguyên nhân: Do ở đây div chứa nội dung không phải là con trực tiếp của div Container, mà nó là “cháu” của Container, thì lúc này EqualHeight không có tác dụng.
Để hiểu hơn vấn đề, bạn có thể xe code này, code này mình lấy code của bạn và customize lại chút xíu (dễ hiểu rồi nhé ^_^): http://bis.net.vn/sitefiles/1000/height.rar
Trường hợp này có cách xử lý nào hay không nhỉ.
Link dơn độ cao của div hình như ko được, pác kiểm tra lại giúp xem DW ơi
(
Thực sự khi nhìn code của bạn tôi cũng ko biết nên fix cho bạn thế nào. Code trải quá lung tung, ko có ngắt div, ko ghi chú, nhìn thực sự các class và id đan nhau thật tình tôi cũng chẳng biết nội dung nó load những gì. Bạn vui lòng chỉnh lại code cho có hệ thống đôi chút hoặc để người sửa có thể hiểu được bạn đang viết gì, thật tình nhìn tôi muốn mù con mắt >”<
Chào clackken.smith
Cảm ơn bạn đã trả lời.
Bạn hãy xem link này: http://bis.net.vn/learnjquery/HelpMe/default.htm
Khi load trang lần đầu, EqualHeight khong có tác dụng
Sau đó, nếu click vào một link nào đó để load một trang tiếp theo (sử dụng AJAX) thì EqualHeight có tác dụng.
Mình không hiểu vì sao
Giúp mình với.
Code: http://bis.net.vn/sitefiles/1000/HelpMe.zip
cám ơn bạn. it’s very useful.
@mr Minh : Mình chưa hiểu bạn code Ajax kiểu gì mà ko chạy, mình có làm thử 1 đoạn ajax và thấy nó hoạt động rất tốt, bạn có thể xem demo và download code tại :
DEMO : http://bearsharks.com/fix_height/index.php
CODE : http://bearsharks.com/fix_height/height.rar
- Bạn có thể xem và đối chiếu xem code của bạn bị ở đoạn nào nhé ^^.
Mình đã thử cách của bạn OK, nhưng có một vấn đề mong được giúp đỡ
Trường hợp nội dung trong các DIV được nạp động bằng AJAX (mình sử dụng JQuery AJAX) lúc Load trang thì script trên không hoạt động được. (do độ cao của div chưa được xác định).
Mình đã thử đưa script trên vào một Javascript function và gọi function lúc Ajax complete nhưng cũng không có tác dụng.
Mong được giúp đỡ.
Mình mới xem video này và thấy có 1 điều cần lưu ý là IE nó sẽ chặn các đoạn script được chèn thêm vào trong bài, cần phải chọn “Allow Blocked Content” để có thể chạy bình thường.
Vẫn bấm được bình thường chứ nhỉ? đang pagedown nè, xuống tằng tằng.
Hình như website thiết kế bằng trong firefox bấm pagedown để xuống trang không được hix, hỗm rày mới để ý (đang xài firefox 3.5.5) còn mấy trang thiết kế bằng table thì bấm được. Tưởng máy mình bị lỗi chứ
Chêt rùi,dùng mấy thẻ HTML làm cho cái nội dung comment sai rùi.
Em muón hỏi anh dùng div tạo các dòng các cột tùy ý thì có khó không,anh có thể chỉ giúp em phần này đc ko
Vì dùng table thì quá dễ nhưng khi run thì nó bị co giãn hơn div
Trường hợp mở rộng hơn tạo 1 gồm 2 dòng 2 cột hay 2 dong 3 cột gì đó có phải tạo thêm 1 <div id ="container1" anh em với thẻ kg?
Và hàm CSS lẫn javascript mình sẽ làm tương tự
như ko anh
@sunshine : vấn đề của bạn mình đã trả lời trong video sau trên youtube.com
- Link : http://www.youtube.com/watch?v=jNfslj9RcUc
- Rất cám ơn bạn đã có ý kiến.
equalHeights này chạy trên IE không có hiệu quả. Có thể fix được không nhỉ?
Thanks!
@ Đào Thị Nhàn : Vấn đề này bạn đừng lo, các file thư viện đó bạn đừng bận tâm quá nhiều, cũng ko có gì là lung tung đó cả, các file đó thì đã được mã hóa và nó chính là thư viện của jQuery. Bạn chỉ cần include đúng như mình đã làm là bạn có thể sử dụng rồi. Về các thao tác sử dụng thì bạn có thể xem qua ở Documention của jQuery tại trang chủ của nó. Chúc bạn thành công nhé
xin cảm ơn bạn về bài hd này. Nhưng mình gà về Jquery nên vui lòng giải thích về hai file thư viện query-1.2.3.min.js và Query-equalHieght.js được không? Lúc đầu mình nghĩ đơn giản nó là thư việc chỉ cần dơwload về là đc, nhưng hình như không fải.Vì khi mình dowload thì nó ra búa lua xua ko bít đâu mà lần. Cảm ơn nhiều nhé và chúc bạn sẽ tự tin hơn trong bài hd sau nhé!
rất vui khi được xem video của bạn. JQuery thật bổ ích. Cám ơn bạn nha. Chắc do bạn căn thẳng quá nên làm việc hơi rung. Bạn cứ xem bạn đang nói chuyện với cái máy tính thân thiện của mình, đừng nghĩ là đang nói chuyện với mọi người thì ổn thôi
Ừ bài của anh hay thật, nhưng anh nói run quá làm em cung muốn run. Nói vui thôi bài đầu tiên ai cũng vậy thôi. Anh ơi em không biết jQuery nhiều lắm chỉ mới nghe mọi người nói về nó thôi.
Anh có thể lam tutorial về jQuery không ạ.
Mong được anh hướng dẫn.
Cảm ơn anh!
Nội dung tut hay nhưng bạn nói chậm, nhỏ và ê a nhiều quá. Chuẩn bị trước khi Record tut nha. Thanks…
Chất lượng tiếng tốt thì chỉ có Microphone “độ” thôi em. Cái headphone của anh cũng thuộc dàng cùi hủi
. Ngày trước anh mua để chat chit thôi đó mà. Khi nào có tiền chắc mua cái Microphone xịn xịn xíu là nghe tốt hơn thôi.
Anh này nghe còn run hơn anh DW ở bài đầu tiên ^_^
Nhưng cũng rất ủng hộ và cám ơn anh đã đóng góp video tutorial này .
P/s: anh DW có thể bày cho mọi người cách thu tiếng cho chất lượng tốt ko anh . Em thấy video thu tiếng hơi khó nghe .