Home > Tip & Trick > ทำ layout ให้สูงเท่ากันทุกคอลัมน์

ทำ layout ให้สูงเท่ากันทุกคอลัมน์


ปัญหาคอลัมน์ยืดยาวไม่เท่ากัน มีรูปแบนเนอร์ที่ต้องการให้อยู่ชิดล่างตลอด มีวิธีแก้ดังต่อไปนี้

ก๊อปปี้สคริปตัวนี้ไป

/*
  ------------------------------------------------
  PVII Equal CSS Columns scripts -Version 2
  Copyright (c) 2005 Project Seven Development
  www.projectseven.com
  Version: 2.1.0
  ------------------------------------------------
*/
function P7_colH2(){ //v2.1.0 by PVII-www.projectseven.com
 var i,oh,h=0,tg,el,np,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){
 for(i=1;i<dA.length;i+=2){dA[i+1].style.paddingBottom='';}for(i=1;ih)?oh:h;}for(i=1;i<dA.length;i+=2){oh=dA[i].offsetHeight;
 if(oh<h){np=h-oh;if(!an&&dA[0]==1){P7_eqA2(dA[i+1].id,0,np);}else{
 dA[i+1].style.paddingBottom=np+"px";}}}document.p7eqa=1;
 document.p7eqth=document.body.offsetHeight;
 document.p7eqtw=document.body.offsetWidth;}
}
function P7_eqT2(){ //v2.1.0 by PVII-www.projectseven.com
 if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){P7_colH2();}
}
function P7_equalCols2(){ //v2.1.0 by PVII-www.projectseven.com
 var c,e,el;if(document.getElementById){document.p7eqc=new Array();
 document.p7eqc[0]=arguments[0];for(i=1;i<arguments.length;i+=2){el=null;
 c=document.getElementById(arguments[i]);if(c){e=c.getElementsByTagName(arguments[i+1]);
 if(e){el=e[e.length-1];if(!el.id){el.id="p7eq"+i;}}}if(c&&el){
 document.p7eqc[document.p7eqc.length]=c;document.p7eqc[document.p7eqc.length]=el}}
 setInterval("P7_eqT2()",10);}
}
function P7_equalCols2(){ //v2.1.0 by PVII-www.projectseven.com
 var c,e,el;if(document.getElementById){document.p7eqc=new Array();
 document.p7eqc[0]=arguments[0];for(i=1;i=pt)?pt:p;
 g.style.paddingBottom=np+"px";if(np<pt){np+=inc;
 setTimeout("P7_eqA2('"+el+"',"+np+","+pt+")",sp);}
}

เซฟตั้งชื่อ สมมติว่าชื่อ eqCols2.js แอดมันไว้ที่ส่วน head

<script type="text/javascript" src="eqCols2.js"></script>

จากนั้นเรียกใช้งาน ตามที่เว็บเค้าแนะนำ คือใส่ที่ body

<body onLoad="P7_equalCols2(1,'c1','P','c2','P')">

สคริปจะทำงานโดยการใส่ padding-bottom ให้กับแท็กที่เรากำหนด

  • เลข 1 คือ คอลัมน์ที่สั้นกว่าจะยืดยาวให้เท่ากันกับคอมลัมน์ที่เรากำหนดแบบ animation ถ้าไม่ต้องการให้ใส่ 0
  • c1 คือ id ของคอมลัมน์ เช่น col-one
  • P คือ แท็ก html ที่อยู่ใน คอลัมน์ที่เรากำหนด อาจจะใส่เป็น div หรือ แท็กอื่นได้
  • c2 คือ id ของ คอลัมน์ที่2 เช่น col-two

หากในเว็บนั้นมีการเรียกใช้ jquery สามารถเรียกใช้แบบนี้ได้ โดยไว้ที่ส่วนใดก็ได้ในหน้าเว็บ

var $j = jQuery.noConflict();
$j('document').ready(function() {
	P7_equalCols2(1,'col-one','p','col-two','div')
});

จากตัวอย่างด้านบน เราจะได้ col-one และ col-two สูงเท่ากัน โดยที่ หาก col-two สูงกว่า มันจะวิ่งไปที่ col-one และทำการใส่ padding-bottom ที่แท็ก p กลับกัน หาก col-one สูงกว่า มันจะไปที่ col-two แล้ว ใส่ padding-bottom ที่แท็ก div

**** ถ้าในนั้น มี div หรือ p มากกว่า 1 ตัว มันจะใส่ padding ในตัวสุดท้าย

ข้อแนะนำ

- ใส่ id ให้ถูกต้อง ตรวจสอบว่า ในคอลัมน์นั้นมี แท็กที่เรา ระบุไว้หรือไม่
- หากต้องการให้คอมลัมน์ยืดออกที่ส่วนกลางโดยที่มีเนื้อหาอยู่บนล่าง ให้ใช้แท็กที่ไม่ซ้ำกับแท็กอื่น เช่น <pre> หรือ <span>
- ถ้ามี 3 คอลัมน์หรือ4 คอลัมน์ก็ให้เพิ่มโค้ดต่อไปเช่น (1,’c1′,’P',’c2′,’P',’c3′,’P',’c4′,’p')

ข้อมูลจาก

http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
ตัวอย่างจากในเว็บ http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm

Related Articles

  • Share/Bookmark
Categories: Tip & Trick
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. au8ust
    July 1st, 2009 at 23:28 | #1

    วาว วิธีแปลกแฮะ ขอบคุณครับ

  2. July 2nd, 2009 at 08:50 | #2

    เยี่ยมมากๆครับ

  3. July 2nd, 2009 at 08:51 | #3

    เยี่ยมมากครับ

  4. August 4th, 2009 at 17:04 | #4

    $(document).ready(function(){
    var content = $(“div#content”).height(); //เก็บค่าความสูงของ div ไว้
    var sidebar = $(“div#sidebar”).height(); //เก็บค่าความสูงของ div ที่2 ไว้
    if(content > sidebar) { //ถ้าค่าของ div แรกมากกว่า
    $(“div#sidebar”).css(“height”, content); //ให้เพิ่มความสูงของ div ที่ 2 ให้เท่ากัน
    }
    if (content < sidebar) { //ถ้าค่าของ div ที่ 2 มากกว่า
    $(“div#content”).css(“height”, sidebar); //ให้เพิ่มความสูงของ div แรกให้เท่ากัน
    }
    });

    อันนี้เขียนเองนะครับ โดยใช้ JQuery ช่วย (ผมเขียน javascript ไม่เป็น)
    jquery จะมีฟังก์ชันรองรับเยอะมาก

  5. divland
    August 4th, 2009 at 22:48 | #5

    มันจะมีปัญหาครับ ถ้าใช้ height เวลามีคอนเท้นยาว FF มันจะไม่ยืดให้ ต้องเชียนเช็กอีกทีว่า Browser อะไร ถ้าเป็น FF ต้องใช้ min-height ครับ ส่วน ปัญหาอีกอย่างคือถ้าใน div นั้นมีรูปแล้วรูปไม่ได้ใส่ height ไว้ แล้วรูปยังโหลดไม่เสร็จ โหลดช้า ความสูงของ div จะเพี้ยนไปทันทีครับ

  6. August 5th, 2009 at 13:51 | #6

    โค้ดข้างบนเป็นการยืดให้เท่ากันหมดครับ
    ไม่ได้กำหนดใน css ให้ height เลย

    แต่ใช้ JQuery เพิ่มลงไปทุกครั้งที่โหลดหน้า

    Ex.$(”div#content”).css(”height”, sidebar);
    ให้เพิ่ม element id content ให้มีค่าเท่ากันกับ div อีกตัว
    ไม่ได้กำหนดรูปในนั้นครับ

    ถ้าเข้าหน้าใหม่ที่อีกฝั่งสั้นกว่า ก็ให้ JQuery เพิ่มความสูงให้กับฝั่งนั้นครับ

  7. August 23rd, 2009 at 13:53 | #7

    เจอ blog นี้แล้วทำให้อยากศึกษาเวบ design ให้มากขึ้นอีก ผมเป็นแต่ php เรื่อง layout นี่โคตรโง่จริงๆ แล้วจะแวะมาบ่อยๆนะครับ …

  8. dd
    September 30th, 2009 at 12:08 | #8

    มองไม่เห็นภาพอ่ะครับ
    ใครช่วยทำให้เห็นภาพได้ป่าว

  9. December 6th, 2009 at 16:05 | #9

    ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ

  10. December 6th, 2009 at 16:05 | #10

    Thank you for good information

  11. February 9th, 2010 at 00:51 | #11

    เยี่ยมครับ ขอ bookmark ไว้ใช้ในอนาคตเลยนะครับ

  12. March 12th, 2010 at 10:50 | #12

    ขอบคุณครับ:d

  13. May 7th, 2010 at 01:01 | #13

    กลับมาอ่านหลังจากหายไปนานคับ

    ได้ความรู้ใหม่ๆเหมือนเดิม

  14. ZedA
    July 13th, 2010 at 11:26 | #14

    อยากทราบว่าสคริปตัวนี้ใช้กับ Theme WordPress ได้หรือเปล่าค่ะ:d

  15. July 13th, 2010 at 11:41 | #15

    @ZedA
    ใช้ได้ครับ แต่ต้องเพิ่มลงในธีมเองครับ :)

  16. July 15th, 2010 at 22:49 | #16

    งงเล็กน้อย แต่ก็ขอบคุณครับ :-?

  1. No trackbacks yet.