» ทำ layout ให้สูงเท่ากันทุกคอลัมน์>>Divland.com:เรียนรู้วิธีเขียน CSS หลักการ เครื่องมือ ในการเขียน CSS เทคนิคต่างๆ เทมเพลต CSS ฟรี และเรื่องราวเกี่ยวกับ wordpress การทำธีมเวิร์ดเพรส

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

กรกฎาคม 1, 2009 at 1:38 pm · Filed under Tip & Trick

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

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

/*
  ------------------------------------------------
  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&amp;&amp;dA.length){
 for(i=1;i&lt;dA.length;i+=2){dA[i+1].style.paddingBottom='';}for(i=1;ih)?oh:h;}for(i=1;i&lt;dA.length;i+=2){oh=dA[i].offsetHeight;
 if(oh&lt;h){np=h-oh;if(!an&amp;&amp;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&lt;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&amp;&amp;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&lt;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

Tags: css layout, equal height, layout

11 ความเห็น »

au8ust said,

กรกฎาคม 1, 2009 @ 11:28 pm

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

กรกฎาคม 2, 2009 @ 8:50 am

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

กรกฎาคม 2, 2009 @ 8:51 am

เยี่ยมมากครับ
Teague said,

สิงหาคม 4, 2009 @ 5:04 pm

$(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 จะมีฟังก์ชันรองรับเยอะมาก
divland said,

สิงหาคม 4, 2009 @ 10:48 pm

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

สิงหาคม 5, 2009 @ 1:51 pm

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

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

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

ถ้าเข้าหน้าใหม่ที่อีกฝั่งสั้นกว่า ก็ให้ JQuery เพิ่มความสูงให้กับฝั่งนั้นครับ
ลงโฆษณาฟรี said,

สิงหาคม 23, 2009 @ 1:53 pm

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

กันยายน 30, 2009 @ 12:08 pm

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

ธันวาคม 6, 2009 @ 4:05 pm

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

ธันวาคม 6, 2009 @ 4:05 pm

Thank you for good information
เว็บดีไซน์ said,

กุมภาพันธ์ 9, 2010 @ 12:51 am

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