ทำไมส่วนท้ายของฉันอยู่ตรงกลางหน้าเว็บของฉัน

ส่วนท้ายของเว็บไซต์อาจปรากฏขึ้นตรงกลางของหน้าเว็บและไม่อยู่ด้านล่างด้วยเหตุผลหลายประการ หนึ่งในสิ่งที่พบบ่อยที่สุดคือเนื้อหาของเว็บไซต์มีขนาดเล็กและส่วนท้ายถูกผลักไปที่กลาง คอนเทนเนอร์ที่มีส่วนท้าย "" อาจมีรหัสไม่ถูกต้องระยะขอบหรือช่องว่างภายในอาจผิดและคุณสมบัติ "ลอย" อาจผิด

ตำแหน่งท้ายกระดาษ

คุณสมบัติ CSS "ตำแหน่ง" ส่วนท้ายกำหนดตำแหน่งที่ส่วนท้ายวางอยู่บนเว็บเพจที่สัมพันธ์กับองค์ประกอบของหน้าอื่น ๆ เช่นส่วนหัวและเนื้อหาเนื้อหาหลัก ตำแหน่งห้าประเภทคือตำแหน่งคงที่ตำแหน่งคงที่ตำแหน่งสัมพัทธ์ตำแหน่งซ้อนทับและตำแหน่งสัมบูรณ์ การวางตำแหน่งที่แน่นอนในส่วนท้ายจะถูกใช้เพื่อให้องค์ประกอบส่วนท้ายไม่ทำงานในส่วนที่เกี่ยวข้องกับองค์ประกอบอื่น ๆ เพิ่ม "ตำแหน่ง: สัมบูรณ์;" การเข้ารหัสภายในแท็ก "#footer" bracket "{" และ "}" นอกจากนี้เพิ่ม "bottom: 0;" ในบรรทัดใต้รหัส "ตำแหน่ง" โดยตรง ตอนนี้ส่วนท้ายอยู่ในตำแหน่งที่ด้านล่างของคอนเทนเนอร์ "DIV" ของเว็บเพจ

ความกว้างและความสูงส่วนท้าย

คุณสมบัติความกว้างและความสูงของส่วนท้ายอาจรบกวนการกำหนดตำแหน่งส่วนท้าย หากส่วนท้ายมีขนาดใหญ่เกินไปก็จะใช้พื้นที่มากเกินไปที่ด้านล่างของเว็บเพจ ภายในแท็กวงเล็บ "#footer" ของ "{" และ "}" แสดงรายการ "width: Xpx;" และ "height: Xpx;" การเข้ารหัส เปลี่ยนความกว้างเป็น "100%" เพื่อทำให้ส่วนท้ายกว้างเท่ากับเนื้อหาของเว็บไซต์ที่เหลือ เปลี่ยนความสูงเป็นขนาดพิกเซลที่ต้องการเช่น "60px" หรือ "75px" การเปลี่ยนแปลงสองอย่างนี้อาจส่งผลต่อส่วนท้ายที่ถูกผลักลงไปที่ด้านล่างของเว็บเพจ

ระยะขอบและแพ็ดดิ้ง

การเข้ารหัส Margin และ Padding สามารถรบกวนตำแหน่งท้ายกระดาษได้ เมื่อระยะขอบกระดาษท้ายกระดาษแคบเกินไปหรือช่องว่างภายในกว้างเกินไปตำแหน่งท้ายกระดาษจะเลื่อนและสามารถเลื่อนไปที่ตรงกลางของเว็บเพจ ทางออกที่ง่ายอย่างหนึ่งคือการลบระยะขอบและช่องว่างภายในเพื่อให้คุณสมบัติส่วนท้ายนั้นตรงกับส่วนที่เหลือของการเข้ารหัส ค้นหาคุณสมบัติ "#footer" ในการเข้ารหัสหน้าเว็บ ภายในแท็กวงเล็บของ "{" และ "}" คือ "ระยะขอบ: Xpx Xpx Xpx Xpx;" และ "การเติมเต็ม: Xpx Xpx Xpx Xpx;" การเข้ารหัส ตอนนี้ระยะขอบท้ายและช่องว่างภายในจะถูกกำหนดโดยแท็ก "#body" และ "#container" ที่ด้านบนของหน้าเว็บ ลบทั้งสองบรรทัดการเข้ารหัสและรีเฟรชเว็บเพจ

โครงร่างคอนเทนเนอร์

ส่วนท้ายของเว็บไซต์เป็นองค์ประกอบหนึ่งที่อยู่ภายในเค้าโครง DIV คอนเทนเนอร์โดยรวม เมื่อคุณสมบัติเค้าโครงคอนเทนเนอร์ไม่ถูกต้องอาจมีผลต่อตำแหน่งส่วนท้ายของเว็บเพจ ภายในแท็กวงเล็บ "#container" ของ "{" และ "}" เป็นคุณสมบัติ "ความสูง" และ "ตำแหน่ง" เดียวกัน เปลี่ยน "height" เป็น 100% และเปลี่ยน "position" เป็น relative เพิ่มบรรทัดใหม่ของการเข้ารหัสลงใน "#container" และพิมพ์ "min-height: 100%;" ซึ่งทำให้เค้าโครงคอนเทนเนอร์ทั้งหมดมีความสูงขั้นต่ำใหม่ ตอนนี้หน้าเว็บทั้งหมดจะยังคงความสูงเต็มของหน้าจอโดยไม่คำนึงถึงปริมาณเนื้อหา ตำแหน่งสัมพัทธ์ยังโต้ตอบกับตำแหน่งสัมบูรณ์ของส่วนท้ายด้วย