วิธีทำให้ส่วนท้ายของหน้า ("ส่วนท้าย") ติดอยู่ที่ขอบด้านล่างของหน้าต่าง - นี่อาจเป็นปัญหาที่พบบ่อยที่สุดในเลย์เอาต์ของหน้าเว็บไซต์ แน่นอนว่ามีวิธีแก้ปัญหาและมีหลายวิธี ด้านล่างนี้เป็นวิธีหนึ่งเพื่อให้แน่ใจว่ามีการกดส่วนท้ายที่ด้านล่างของหน้าเสมอ โดยไม่คำนึงถึงปริมาณของเนื้อหาและประเภทของเบราว์เซอร์
มันจำเป็น
ความรู้พื้นฐานเกี่ยวกับ CSS และ HTML
คำแนะนำ
ขั้นตอนที่ 1
ลองใช้รูปแบบการแบ่งหน้าทั่วไปเป็นตัวอย่าง - จะมีห้องใต้หลังคา (ส่วนหัว) บล็อกหลัก และส่วนท้าย แน่นอน หากจำเป็น คุณสามารถใส่หลายคอลัมน์ในบล็อกหลัก แต่เราจะไม่ทำที่นี่ เราจะเน้นที่การไม่วางตำแหน่งส่วนท้ายเท่านั้น โค้ด HTML ของหน้าจะเริ่มต้นด้วยการประกาศข้อกำหนด:
ระหว่างแท็กและ นอกจากชื่อหน้าแล้ว เราจะระบุการเข้ารหัส เช่นเดียวกับลิงก์ไปยังไฟล์ CSS ภายนอกที่มีคำอธิบายของสไตล์: @import "styles.css"; เราจะไม่วาง คำอธิบายรูปแบบโดยตรงใน html-code ของหน้าเพื่อหลีกเลี่ยงความยุ่งยากกับเบราว์เซอร์ Opera ของรุ่นที่ 9 ระหว่างแท็กและวางโครงสร้างบล็อกของหน้า อย่างแรกคือบล็อกชื่อเรื่อง เราจะให้ตัวระบุส่วนหัวเพื่อกำหนดรูปแบบสำหรับบล็อกนี้โดยเฉพาะ:
ส่วนหัวนี้จะอยู่ด้านบนสุดของหน้าต่างเสมอ
จากนั้น - บล็อกหลักของหน้า มันจะประกอบด้วยสองอันซ้อน - ด้านนอก (ตัวระบุ - ด้านนอก) และด้านใน (ตัวระบุ - outerwrap):
นี่คือส่วนหลัก
และสุดท้ายส่วนท้าย:
มันเป็นส่วนท้าย - ที่ด้านล่างของหน้าต่างเสมอ!
หน้าที่สมบูรณ์จะมีลักษณะดังนี้:
วิธีกดลงท้ายกระดาษ
@ นำเข้า "styles.css";
ส่วนหัวนี้จะอยู่ด้านบนสุดของหน้าต่างเสมอ
นี่คือส่วนหลัก
มันเป็นส่วนท้าย - ที่ด้านล่างของหน้าต่างเสมอ!
ขั้นตอนที่ 2
ทีนี้มาดูเนื้อหาของสไตล์ชีตกัน มันใช้รูปแบบต่อไปนี้: บล็อกหน้าหลักจะถูกตั้งค่าเป็นความสูง 100% ชื่อเรื่องจะถูกจัดตำแหน่งอย่างสมบูรณ์ และส่วนท้ายจะค่อนข้าง เพื่อป้องกันไม่ให้หัวเรื่องซ้อนทับเนื้อหาหลักของหน้า เนื้อหาหลักนี้จะถูกวางไว้ในกล่องเพิ่มเติมภายในกล่องหลัก และกล่องเพิ่มเติมนี้จะถูกตั้งค่าเป็นระยะขอบด้านบนเท่ากับความสูงของกล่องหัวเรื่อง และส่วนท้ายจะได้รับระยะขอบด้านบนติดลบเท่ากับความสูง - ด้วยวิธีนี้ มันจะยกขึ้นเหนือขอบด้านล่างของหน้าต่างจนเต็มความสูง เนื้อหาทั้งหมดของไฟล์ css: * {ระยะขอบ: 0; ช่องว่างภายใน: 0}
html, เนื้อหา {ความสูง: 100%;} เนื้อหา {
สีดำ;
ตำแหน่ง: ญาติ;
}
#นอก {
ความสูงขั้นต่ำ: 100%;
ระยะขอบ: 0;
พื้นหลัง: สีขาว;
สีดำ;
} * html #outer {ความสูง: 100%;}
#หัวข้อ {
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 0;
ซ้าย: 0;
ความกว้าง: 100%;
ความสูง: 70px;
พื้นหลัง: # 304a00;
ล้น: ซ่อน;
สี: ขาว;
จัดข้อความ: ศูนย์;
} #ส่วนท้าย {
ตำแหน่ง: ญาติ;
ขอบบน: -50px;
ชัดเจน: ทั้งสอง;
ความกว้าง: 100%;
ความสูง: 50px;
พื้นหลังสี: # 304a00;
สี: ขาว;
จัดข้อความ: ศูนย์;
}
.outerwrap {
ลอย: ซ้าย;
ความกว้าง: 100%;
ช่องว่างภายใน: 71px;
} ไฟล์นี้ควรบันทึกด้วยชื่อที่เราระบุไว้ในโค้ด html ของหน้า - styles.css