การสร้าง element เพื่อบรรจุข้อความในเว็บบ่อยครั้งที่เรา
ไม่สามารถคาดการณ์ได้ล่วงหน้าว่าข้อความจะมีความยาวเท่าไหร่
ถ้าหากใช้ height กำหนดความสูงให้กับ element ก็จะเกิดปัญหา
เมื่อข้อความใน element นั้นยาวเกินกว่าที่ element นั้นจะบรรจุไว้ได้
ส่งผลกระทบต่อ element อื่น ๆ ในหน้าเว็บ เพราะความสูงยังคงเท่าเดิม
ไม่ได้ขยายไปพร้อม ๆ กับตัวอักษรที่ล้นออกไป ทำให้เกิดปัญหา
ข้อความซ้อนทับกัน

วิธีแก้ปัญหาเบื้องต้น คือ เปลี่ยนจาก height เป็น min-height
ซึ่งชื่อมันก็สื่ออยู่แล้วว่า กำหนดความสูงขั้นต่ำไว้เท่านี้ ๆ แต่ถ้ามีข้อความ
หรือมีอะไรก็ตามที่อยู่ใน element นั้นที่ทำให้ความสูงเกินค่าขั้นต่ำ
ที่ระบุไว้ก็ให้ขยาย/ยืด element นี้ตามความสูงจริง ๆ

แต่ ie6 หรือ ต่ำกว่า จะไม่สามารถใช้คำสั่งนี้ได้ คือใช้แล้วไม่เกิดผล

แล้วทำไงล่ะทีนี้?

โอเค ไม่ต้องห่วง เรามีวิธีแก้ปัญหานี้อยู่แล้ว
นั่นก็คือใส่ height:auto ไปพร้อมกับ min-height

  1. #test{
  2. width:500px;
  3. height:auto;
  4. min-height:200px;
  5. border:1px solid #ff0000;
  6. }

ปล. วิธีนี้ทดสอบแล้วได้ผลเฉพาะ ie, firefox, และ safari
ที่รันบน window เท่านั้น

อ้างอิง: http://www.search-this.com/2007/02/05/css-min-height-explained/