"ส่วนท้าย" มักจะเป็นบล็อกด้านล่างสุดของเค้าโครงหน้าเว็บ ปัญหาที่พบบ่อยที่สุดในการวางตำแหน่งส่วนท้ายนี้คือการจัดตำแหน่งที่ด้านล่างของหน้าต่างเสมอ โดยไม่คำนึงถึงความสมบูรณ์ของหน้าหรือประเภทเบราว์เซอร์ มีวิธีแก้ไขปัญหาค่อนข้างน้อยตั้งแต่ช่วงที่มีการเปลี่ยนรูปแบบบล็อกครั้งใหญ่ และหนึ่งในนั้นแสดงไว้ด้านล่าง
มันจำเป็น
ความรู้พื้นฐานเกี่ยวกับ CSS และ HTML
คำแนะนำ
ขั้นตอนที่ 1
ลองใช้โครงร่างเลย์เอาต์ที่พบบ่อยที่สุดเป็นพื้นฐาน - สามบล็อกวางไว้เหนืออีกอันหนึ่ง ด้านบน (ส่วนหัว) ควรจัดชิดขอบด้านบนของหน้าต่าง ด้านล่าง (ส่วนท้าย) - กับเส้นขอบด้านล่าง และหลัก (เนื้อหา) ควรเติมช่องว่างทั้งหมดระหว่างพวกเขา ซอร์สโค้ดต้องมีลิงก์ไปยังข้อกำหนดเฉพาะของ XHTML 1.0 Transitional และต้องใส่คำอธิบายของสไตล์ในไฟล์ CSS ภายนอก (เพื่อหลีกเลี่ยงปัญหากับ Opera 9. XX) คำอธิบาย HTML ของโครงสร้างจะต้องอยู่ในส่วนหลัก เนื้อหาของหน้า แน่นอนว่ามันจะเริ่มจากบล็อกบนสุดในแท็กที่ควรวางแอตทริบิวต์ตัวระบุที่มีค่าเช่น divHead:
บล็อกส่วนหัว
บล็อกหลักควรประกอบด้วยคู่ของบล็อกที่ซ้อนกัน ตัวนอกจะได้รับตัวระบุ divOut และตัวใน - divContent:
เนื้อหาหลัก.
ส่วนท้ายถูกตั้งค่าเป็น divFoot:
ส่วนท้ายของหน้า
ขั้นตอนที่ 2
โค้ด HTML ที่สมบูรณ์ของหน้าควรมีลักษณะดังนี้:
สามช่วงตึก
@ นำเข้า "style.css";
นี่คือบล็อกส่วนหัว
เนื้อหาหลัก.
นี่คือส่วนท้ายของหน้า
ขั้นตอนที่ 3
คำอธิบายสไตล์ใช้กลไกการจัดวางต่อไปนี้: บล็อกกลาง (divOut) ถูกตั้งค่าเป็นความสูง 100% บล็อกบนสุด (divHead) จะมีตำแหน่งที่แน่นอน และบล็อกด้านล่าง - สัมพันธ์กัน ในบล็อกเนื้อหาหลัก (divContent) จะต้องมีพื้นที่ว่างที่ด้านบนเท่ากับความสูงของบล็อกส่วนหัวเพื่อไม่ให้ทับซ้อนกับเนื้อหาหลักของหน้า และบล็อกด้านล่าง (ส่วนท้าย) ควรมีระยะขอบติดลบที่ด้านบนเท่ากับความสูงของบล็อกนี้ ซึ่งจะยกขึ้นเหนือขอบด้านล่างของหน้าต่างเบราว์เซอร์ กลไกนี้สามารถดำเนินการได้โดยใช้ไฟล์ css ที่มีเนื้อหาดังต่อไปนี้: * {margin: 0; ช่องว่างภายใน: 0}
html ตัว {ความสูง: 100%;} ตัว {
ตำแหน่ง: ญาติ;
สี: # 000;
}
#divOut {
ระยะขอบ: 0;
ความสูงขั้นต่ำ: 100%;
พื้นหลัง: #FFF;
สี: # 000;
}
* html #divOut {ความสูง: 100%;}
#divHead {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0;
ด้านบน: 0;
ความกว้าง: 100%;
ความสูง: 80px;
พื้นหลัง: # 2F5000;
ล้น: ซ่อน;
จัดข้อความ: ศูนย์;
สี: #FFF;
} #divFoot {
ตำแหน่ง: ญาติ;
ชัดเจน: ทั้งสอง;
ขอบบน: -60px;
ความสูง: 60px;
ความกว้าง: 100%;
พื้นหลังสี: # 2F5000;
จัดข้อความ: ศูนย์;
สี: #FFF;
}
.divContent {
ความกว้าง: 100%;
ลอย: ซ้าย;
แผ่นรองด้านบน: 81px;
} ชื่อที่คุณระบุสำหรับสไตล์ชีตในโค้ด HTML คือ style.css