จะเก็บส่วนท้ายของคุณได้อย่างไร?

โพสต์นี้เป็นภาษาเกาหลีด้วย

ส่วนท้ายเป็นองค์ประกอบสุดท้ายของหน้า อย่างน้อยที่สุดจะอยู่ที่ด้านล่างของวิวพอร์ตหรือต่ำกว่าหากเนื้อหาของหน้าสูงกว่าวิวพอร์ต ง่ายใช่มั้ย? เหรอ?

เมื่อทำงานกับเนื้อหาไดนามิกที่มีส่วนท้ายปัญหาบางครั้งเกิดขึ้นเมื่อเนื้อหาบนเพจไม่เพียงพอที่จะเติมเต็ม ส่วนท้ายแทนที่จะอยู่ที่ด้านล่างของหน้าซึ่งเราต้องการให้อยู่ต่อไปให้โผล่ขึ้นมาและเว้นช่องว่างไว้ข้างใต้

สำหรับการแก้ไขอย่างรวดเร็วคุณสามารถวางตำแหน่งส่วนท้ายที่ด้านล่างของหน้าได้ แต่สิ่งนี้มาพร้อมกับข้อเสียของตัวเอง หากเนื้อหามีขนาดใหญ่กว่าวิวพอร์ตส่วนท้ายจะยังคง 'ติดอยู่' ที่ด้านล่างของวิวพอร์ตไม่ว่าเราจะต้องการหรือไม่ก็ตาม

สิ่งนี้แสดงให้เห็นพฤติกรรมที่เราไม่ต้องการและไม่ต้องการ:

มาดูวิธีการเพื่อให้บรรลุเป้าหมายนี้

ทำให้ส่วนท้ายของคุณอยู่ภายใต้การควบคุม

index.html:

main.css:

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

แล้วนี่มันทำอะไร?

  • page-containerไปรอบ ๆ ทุกอย่างบนหน้าและชุดความสูงขั้นต่ำเป็น 100% ของความสูงวิวพอร์ต ( vh) ตามที่เป็นอยู่relativeองค์ประกอบลูกของมันสามารถตั้งค่าabsoluteตามตำแหน่งได้ในภายหลัง
  • content-wrapมีช่องว่างด้านล่างที่มีความสูงของส่วนท้ายเพื่อให้มั่นใจว่าพื้นที่ตรงพอที่เหลืออยู่สำหรับส่วนท้ายในภาชนะที่พวกเขามีทั้งในก. ตัดdivจะใช้ที่นี่ที่จะมีเนื้อหาที่หน้าอื่น ๆ ทั้งหมด
  • footerถูกตั้งค่าให้absoluteติดกับbottom: 0ของpage-containerมันอยู่ใน สิ่งนี้มีความสำคัญเนื่องจากไม่ได้absoluteอยู่ที่วิวพอร์ต แต่จะเลื่อนลงถ้าpage-containerสูงกว่าวิวพอร์ต ตามที่ระบุไว้ความสูงที่กำหนดไว้2.5remที่นี่โดยพลการถูกใช้ในcontent-wrapด้านบน

และคุณก็มี ตอนนี้ส่วนท้ายของคุณอยู่ในที่ที่คุณคาดไม่ถึง!

สัมผัสสุดท้าย

แน่นอนว่านี่คือ CSS ดังนั้นจึงไม่สมบูรณ์หากไม่มีการพิจารณา UX เฉพาะมือถือและวิธีอื่นที่ใช้min-height: 100%แทนที่จะใช้100vh. แต่สิ่งนี้มีข้อเสียของตัวเอง

นอกจากนี้ยังสามารถใช้ Flexbox (ที่มีการเติบโตแบบยืดหยุ่น) หรือ Grid ได้และมีประสิทธิภาพมาก

วิธีการที่คุณเลือกขึ้นอยู่กับคุณทั้งหมดและการออกแบบของคุณโดยเฉพาะ หวังว่าตัวอย่างและลิงก์ข้างต้นจะช่วยให้คุณประหยัดเวลาในการตัดสินใจและนำไปใช้

ขอบคุณที่อ่าน. นี่คือสองสิ่งอื่น ๆ ที่ฉันเขียนเมื่อเร็ว ๆ นี้:

  • คู่มือสำหรับผู้เริ่มต้นใช้งาน Elastic Container Service ของ Amazon
  • การทดสอบปฏิกิริยากับ Jest และ Enzyme