ปัญหาความสูง css div 100% หรือไม่?

ฉันต้องการให้ div ใช้ความสูงของหน้าจอทั้งหมด นั่นเป็นสาเหตุที่ฉันพบลิงก์ต่อไปนี้:

เคล็ดลับ: ทำให้คอนเทนเนอร์มีความสูงที่ระบุ เช่น body{height:100%} ดูเหมือนว่าจะทำงานได้ดี แต่ฉันพบว่า: เมื่อคุณเพิ่มการอ้างสิทธิ์ประเภทเอกสารแล้ว เช่น:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

มันไม่ทำงาน อย่างน้อยใน Firefox 3.* มันไม่ทำงาน มีข้อเสนอแนะอะไรบ้าง?


html css height
person WilliamLou    schedule 12.12.2009    source แหล่งที่มา

คำตอบ (1)


arrow_upward
3
arrow_downward

สิ่งต่อไปนี้ใช้ได้กับฉันใน HTML 4.01 เข้มงวด (จากลิงก์ที่สองของคุณ) ไม่มีแถบเลื่อนแนวตั้งปรากฏ แม้ว่า body จะยาวมากก็ตาม สิ่งนี้ใช้ได้ผลสำหรับคุณหรือไม่?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <style>
      html, body {
      /* get rid of default spacing on the edges */
      margin: 0;
      padding: 0;

      /* get rid of that 2px window border in Internet Explorer 6 */
      border: 0;

      /* fill the height of the browser */
      height: 100%;

      /* no more scroll bar */
      overflow: hidden;
    }
    </style>
  </head>
  <body>
    <div>
      many many lines of text
    </div>
  </body>
</html>
person Kaleb Brasee    schedule 12.12.2009
comment
ฉันสังเกตเห็นว่าประเภทเอกสารนั้นไม่สำคัญ สิ่งสำคัญคือ: ไม่เพียงแต่เพิ่มความสูง:100% ให้กับเนื้อหา แต่ยังรวมถึง html ด้วย - person WilliamLou; 14.12.2009