การจัดการกับความสูง

สำหรับคนที่ได้ลองเขียน css ด้วยตัวเองมาบ้างแล้ว ก็คงพอจะทราบว่า แท้จริงแล้ว หน้าเว็บก็ไม่ได้มีอะไรมากไปกว่าการทำกล่องและใส่ margin padding ซึ่งก็คือ การจัดตำแหน่งการแสดงผลของหน้าเว็บเพจ โดยใช้โค้ดที่แยกออกจากส่วน โครงสร้าง HTML เท่านั้นเอง แต่ภายใต้การกระทำที่แสนจะพื้นฐาน กลับมีเทคนิคมากมาย เพราะเบราเซอร์ที่มีในโลกนี้ ไม่ได้ทำงานไปในทิศทางเดียวกัน หากเขียน css ให้เว็บเพจดูได้สมบูรณ์ที่ เบราเซอร์เดียวแล้วละก็ เราจะไม่ต้องมีเทคนิคอะไรเลยก็ทำได้ง่ายแสนง่าย  ดังนั้นเมื่อเริ่มเขียน css สิ่งที่ควรจะระลึกไว้เสมอคือ ถ้าต้องการให้เว็บดูได้สมบูรณ์ที่ หลายๆเบราเซอร์ อย่าใช้โค้ดใหม่ (css2 , css3) หรือโค้ดเทพต่างๆให้มากนัก เพราะคุณจะประสบปัญหาการแสดงผลอย่างแน่นอน แล้วจะต้องมานั่ง hack กันให้เสียเวลา  พยายาม keep simple เข้าไว้ หรือถ้าคุณไม่แคร์ และคิดว่า จะให้เว็บดูสุดยอดที่ firefox เท่านั้น นั่นก็อีกเรื่อง ใส่กันเข้าไปให้เต็มที่ ตามใจอยาก

เข้าเรื่องที่จะพูดถึงกัน เว็บเพจโดยทั่วไปแล้ว มักจะถูกกำหนดความกว้าง (width) เป็นค่าอย่างใดอย่างหนึ่ง อาจเป็น pixel หรือ เปอร์เซ็นต์ เพราะเราไม่ต้องการให้มีการยืดที่ด้านข้าง แต่เว็บเราเลื่อนลงข้างล่าง ความสูง(height) จึงมักจะเป็นตัวแปรตาม คือไม่กำหนดค่า แล้วแต่ว่า เนื้อหาภายในมีมากน้อยเพียงใด เรามาดูว่า ปัญหาของค่า height นั้นมีอะไรบ้าง

เริ่มด้วยด้วยโค้ดง่ายๆ โดยมี doctype ตามภาพ

การแสดงผลของ .aa ยังเหมือนกันทั้ง IE6 Fx2.0  เมื่อพิมพ์ตัวหนังสือมากขึ้น โดยเว้นบรรทัด แถบสีเขียว ก็ยืดตามลงมาไม่มีปัญหาแต่อย่างใด

เริ่มกำหนด height

ใส่ค่า height ดังนี้

.aa{width:300px; background:#CCCC00; height:7px}

ผลที่ได้

เมื่อเอาตัว a ออก ผลที่ได้ยังเหมือนเดิม Firefox ทำงานอย่างเถรตรง ตามค่าที่กำหนด   IE ไม่สามารถ กำหนดความสูง ที่ต่ำกว่า ค่าความสูงของ font ที่กำหนดได้ อีกทั้งยังขยายใหญ่ตาม font-size อีกด้วย หากเรากำหนด font-size ให้มีขนาดใหญกว่าปกติ แถบสีเขียวจะใหญ่ตาม ในที่นี้ font-size ไม่ได้ถูกกำหนดไว้ ค่า default ในส่วน body คือ font-size= 16px ดังนั้น ความสูงของ div ที่เล็กที่สุดที่ IE 6 จะได้ทำได้อยู่ที่ประมาณ 19px (รวมระยะห่างโดยรอบ)

นั่นหมายความว่า IE6 ไม่สามารถทำ div อันเล็กๆอย่าง 5×5 px  หรือ 10×10 px ได้  แต่ในเมื่อเรารู้ตัวแปรต้นแล้ว การควบคุมตัวแปรตามย่อมทำได้ ดังนั้นเราก็กำหนดเพิ่มดังนี้

.aa{width:300px; background:#CCCC00;height:7px; font-size:1px}

ผลที่ได้คือ เราจะได้ div ที่ height 7 px เหมือนกันทั้ง IE6 Fx

ความรู้ตรงนี้นำไปใช้อะไรได้บ้าง?  ก็เอาไว้ทำ div เล็กๆสำหรับใส่แบ็คกราวน์ภาพเช่น ทำสี่เหลี่ยม ขอบโค้ง

ขอบโค้งบนล่าง มีความสูงแค่นิดเดียว ถ้าเราทำ div แบบปกติ แล้วใส่แบ็คกราวนด์ รับรองว่าจะเกิดช่องว่างแน่นอน(IE6) การทำกล่องขอบมนแบบต่างๆจะ กล่าวถึง ในโอกาสต่อๆไป

กำหนดความสูงสำหรับกล่องเนื้อหา

เขียนโค้ด css และ html ดังนี้

<style type=”text/css”>
.aa{width:150px; background:#CCCC00; height:150px;}
</style>

<div class=”aa”>divland.com<br />
<br />
<br />
<br />
เว็บไซต์ css เล่า<br />
จากประสบการณ์จริง<br />
<br />
เจอปัญหา<br />
มีวิธีแก้แล้วเอามาเขียน<br />
</div>

จะได้ผลลัพธ์แบบนี้

เห็นความแตกต่างกันชัดเจน IE6 ยืดตามลงมาให้ แต่ Fx สูงตามที่กำหนด
ในกรณีที่เราไม่ต้องการให้กล่องเล็กกว่า 150px เราจึงต้องกำหนดค่า height แต่ขณะเดียวกัน ก็ต้องการให้มันยืดตามเนื้อหาด้วย เราเปลี่ยน css ใหม่ดังนี้

.aa{width:150px; background:#CCCC00; min-height:150px;}

min-height ก็คือ สูงอย่างน้อย  เมื่อกำหนดแบบนี้ Fx จะยืดลงมาเหมือน IE6 แล้ว แต่ถ้า เราลด text  ให้สั้นลงล่ะ
จะได้แบบนี้

นั่นเป็นเพราะ IE6 ไม่รู้จัก property min-height เอาไงดีล่ะ IE6 ต้องใช้ height  แต่ Fx ต้องใช้ min-height ถ้ากำหนด ทั้ง 2 ตัวพร้อมกันเลย Fx ก็จะถูกค่า height กักไว้ ไม่ให้ยืดอยู่ดี  เมื่อเป็นแบบนี้ เราก็นึกถึงการ hack ขึ้นมาล่ะ เราก็เขียน height หรือ min-height ไปก็ได้ แล้ว hack เบราเซอร์ที่เหลือแทน วิธีการ hack ก็ตามนี้ที่เราได้รู้มา

แต่วิธีที่ผมชอบใช้ก็คือเขียนให้อยู่ที่เดียวกันไปเลย โดยใช้ ความรู้เรื่อง !important เข้ามาช่วย เรารู้มาว่า IE6 ไม่ให้ความสำคัญกับ !important อย่างที่ควรจะเป็น (จาก cascading order) ดังนั้นผมจะเขียนแบบนี้

.aa{
width:150px;
background:#CCCC00;
height:auto!important;     /* Fx อ่านบรรทัดนี้ เพราะมี !important */
height:150px;            /* IE6 อ่านบรรทัดนี้ เพราะไม่สน !important อ่านบรรทัดล่างสุด ตามกฎปกติ*/
min-height:150px    /*Fx และเบราเซอร์ใหม่ๆ อ่านบรรทัดนี้ */
}

แปลเป็น ภาษามนุษย์ก็คือ กล่องนี้จะสูง auto ตามเนื้อหา แต่สูงอย่างน้อย 150px  ส่วน IE6 ก็กล่องนี้ สูง 150 px

ความสูงของกล่องเมื่อมีการ float ข้างใน

จากโค้ด css และ html ดังนี้

.aa{width:300px; background:#CCCC00;padding:10px;}
.bb{width:100px; height:100px; float:left; background:#f2f2f2}
.cc{width:100px; height:100px; float:right; background:#f2f2f2}

<div class=”aa”>
<div class=”bb”></div>
<div class=”cc”></div>
</div>

จะได้ผล ดังนี้

float แปลว่า ลอย เมื่อมันลอยอยู่ ขอบของ div ตัวนอก จึงไม่ถูกดึงลงมา วิธีแก้มีอยู่ 2 วิธี

1. คือ ใช้ clear  เขียน class เพิ่ม ดังนี้

.clear-all{clear:both; height:0; line-height:0}

แล้วเพิ่ม ไปในส่วน html ดังนี้
<div class=”aa”>
<div class=”bb”></div>
<div class=”cc”></div>
<br class=”clear-all” /> หรือ <div class=”clear-all”> </div>
</div>

2. คือ ใส่ overflow:hidden ที่ div ตัวนอก

.aa{width:300px; background:#CCCC00;padding:10px; overflow:hidden}

ก็จะได้การแสดงผลที่ถูกต้องทั้ง 2 เบราเซอร์

Related Articles

• เขียน class preload (9)
• ทำกล่องขอบโค้งด้วย css (15)
• เพิ่มความหมายด้วย acronym และ abbr (5)
• แนะนำ firefox extension เจ๋งๆ (9)
• เรียนรู้การใช้ ul li step by step (28)