แนวคิดพื้นฐานคือ

การพิจารณาตั้งค่า div คอนเทนเนอร์ในเลเยอร์ภายนอกก่อน โดยตั้งค่า id เป็น #container เพื่อให้ความสูงเท่ากับความสูงของหน้าต่างเบราว์เซอร์ จากนั้นตั้งค่า #footer div เป็น div ลูกของ # และใช้การวางตำแหน่งที่แน่นอนเพื่อให้เขาปักหมุดไว้ที่ปลายด้านล่างสุดของ #คอนเทนเนอร์ เพื่อให้ได้ผลลัพธ์ตามที่ต้องการ

คลิกที่นี่เพื่อดูผลกระทบของหน้าเคส เปลี่ยนความสูงและความกว้างของเบราว์เซอร์เพื่อดูเอฟเฟกต์ของส่วนท้ายกระดาษ

การติดตั้งโค้ด

: ก่อนอื่นให้พิจารณาโครงสร้าง HTML โค้ด HTML ของหน้าสาธิตนี้ง่ายมาก

body,html {
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
แบบอักษร: 12px/1.5 อาเรียล;
ความสูง:100%;
-
#คอนเทนเนอร์ {
ความสูงขั้นต่ำ: 100%;
ตำแหน่ง: ญาติ;
-
#เนื้อหา {
ช่องว่างภายใน: 10px;
ช่องว่างด้านล่าง: 60px;
/* 20px(ขนาดตัวอักษร)x2(ความสูงของบรรทัด) + 10px(ช่องว่างภายใน)x2=60px*/
-
#ส่วนท้าย {
ตำแหน่ง: แน่นอน;
ด้านล่าง: 0;
การขยาย: 10px 0;
สีพื้นหลัง: #AAA;
ความกว้าง: 100%;
-
#ส่วนท้าย h1 {
แบบอักษร: 20px/2 Arial;
ระยะขอบ:0;
การขยาย:0 10px;
-
1: ขั้นแรก ให้ตั้งค่าความสูง (แอตทริบิวต์ความสูง) ขององค์ประกอบ html และเนื้อหาเป็น 100% (บรรทัดที่ 5) ขั้นแรกจะทำให้แน่ใจว่าความสูงขององค์ประกอบรูทเต็มหน้าต่างเบราว์เซอร์ จากนั้นความสูงของ #container ก็สามารถทำได้ กรอกหน้าต่างเบราว์เซอร์ทั้งหมด สำหรับสาเหตุที่องค์ประกอบ html และเนื้อหาถูกตั้งค่าพร้อมกันนั้นเป็นเพราะ Firefox และ IE ถือว่าองค์ประกอบรูทแตกต่างกัน ดังนั้นจึงตั้งค่าไว้ที่นี่

2: จากนั้นตั้งค่าความสูงของ #container เป็น 100% (บรรทัดที่ 8) แต่โปรดทราบว่ามีการใช้แอตทริบิวต์ "min-height" ที่นี่แทนแอตทริบิวต์ความสูงปกติ เนื่องจากเราต้องพิจารณาว่าหาก # หากเนื้อหา ในเนื้อหาเพิ่มขึ้นและความสูงเกินความสูงของหน้าต่างเบราว์เซอร์ ดังนั้นหากความสูงของ #container ยังคงเป็น 100% #footer จะยังคงอยู่ที่ตำแหน่งล่างสุดของหน้าต่างเบราว์เซอร์ ซึ่งครอบคลุมเนื้อหา #content ใน วัตถุประสงค์ของการใช้แอตทริบิวต์ min-height คือทำให้ความสูงของ #container เป็น "อย่างน้อย" ความสูงของหน้าต่างเบราว์เซอร์ เมื่อเนื้อหาภายในเพิ่มขึ้น ความสูงก็จะเพิ่มขึ้นด้วย นี่คือเอฟเฟกต์ที่เราต้องการ

อย่างไรก็ตาม ควรสังเกตว่าใน Firefox และ IE7 รองรับแอตทริบิวต์ min-height ในขณะที่ IE6 ไม่รองรับแอตทริบิวต์ min-height อย่างไรก็ตาม "บังเอิญ" คือใน IE6 คุณลักษณะ min-height จะ ถูกตีความว่าเป็นแอตทริบิวต์ height แต่ผลกระทบของคุณลักษณะ height ใน IE6 คือผลกระทบที่ min-height ควรมีตั้งแต่แรก กล่าวคือ ใน IE6 ความสูงของ div ลูกจะเพิ่มความสูงของ div หลัก . ดังนั้นสิ่งนี้จึงสามารถบรรลุผลที่เราต้องการใน IE6, IE7 และ Firefox ได้อย่างแน่นอน

3: ถัดไป ตั้งค่า #container เป็นตำแหน่งสัมพัทธ์ (บรรทัดที่ 9) เพื่อให้เป็นการอ้างอิงตำแหน่งของ #footer ที่อยู่ข้างใน ซึ่งเรียกว่า "องค์ประกอบบรรพบุรุษในตำแหน่งล่าสุด"

4: จากนั้นตั้งค่า #foooter เป็นตำแหน่งที่แน่นอน (บรรทัดที่ 17) และวางไว้ที่ด้านล่างของ #container (บรรทัดที่ 18)

5: แต่โปรดทราบว่าหากเราวาง #foooter ที่ด้านล่างของ #container จริงๆ แล้วมันจะทับซ้อนกับ #content div ด้านบน เพื่อหลีกเลี่ยงการครอบคลุมเนื้อหาใน #content เราจึงตั้งค่าไว้ใน #contetn โดยการลบช่องว่างภายในออก ที่ด้านล่างและทำให้ค่าของ padding-bottom เท่ากับความสูงของ #footer (บรรทัดที่ 13) คุณสามารถมั่นใจได้ว่าจะหลีกเลี่ยงข้อความของ #content เมื่อคำนวณความสูงนี้ ให้ใส่ใจกับวิธีการคำนวณที่ให้ไว้ใน ความคิดเห็นในรหัส ( บรรทัด 14)