คำถามที่ถามบ่อยในการออกแบบเว็บไซต์คือ "คุณกำหนดความสูงขององค์ประกอบเป็น 100% ได้อย่างไร"?
นี่อาจดูเหมือนคำตอบง่ายๆ คุณเพียงแค่ใช้ CSS เพื่อกำหนดความสูงขององค์ประกอบให้เป็น 100% แต่ไม่ได้ยืดองค์ประกอบดังกล่าวให้พอดีกับหน้าต่างเบราว์เซอร์ทั้งหมด ลองหาสาเหตุที่เกิดเหตุการณ์นี้ขึ้นและสิ่งที่คุณสามารถทำได้เพื่อให้ได้รูปแบบภาพนี้
พิกเซลและเปอร์เซ็นต์
เมื่อคุณกำหนดความสูงขององค์ประกอบโดยใช้คุณสมบัติ CSS และค่าที่ใช้พิกเซลองค์ประกอบดังกล่าวจะใช้พื้นที่ในแนวตั้งมากในเบราว์เซอร์ ตัวอย่างเช่นย่อหน้าด้วย a
ความสูง: 100px;
จะใช้พื้นที่ในแนวตั้ง 100 พิกเซลในการออกแบบของคุณ ไม่ว่าหน้าต่างเบราว์เซอร์ของคุณจะใหญ่แค่ไหนองค์ประกอบนี้จะมีความสูง 100 พิกเซล เปอร์เซ็นต์ทำงานแตกต่างจากพิกเซล ตามข้อมูลจำเพาะของ W3C ความสูงร้อยละคำนวณจากความสูงของตู้คอนเทนเนอร์ ดังนั้นถ้าคุณใส่ย่อหน้าด้วย a ความสูง: 50%;
ภายใน div ที่มีความสูง 100px ย่อหน้าจะมีความสูง 50 พิกเซลซึ่งเป็น 50% ขององค์ประกอบหลัก หากคุณออกแบบหน้าเว็บและคุณมีคอลัมน์ที่คุณต้องการใช้ความสูงเต็มของหน้าต่างความชอบธรรมชาติคือการเพิ่ม ความสูง: 100%;
กับองค์ประกอบนั้น อย่างไรก็ตามหากคุณตั้งค่า ความกว้าง
ไปยัง ความกว้าง: 100%;
องค์ประกอบจะใช้พื้นที่ในแนวนอนเต็มรูปแบบของหน้าดังนั้น ความสูง
ควรจะทำงานเหมือนกันใช่มั้ย? แต่นี่ไม่ใช่กรณีทั้งหมด เพื่อให้เข้าใจว่าเหตุใดจึงเกิดขึ้นคุณต้องเข้าใจวิธีที่เบราว์เซอร์ตีความความสูงและความกว้าง เว็บเบราเซอร์จะคำนวณความกว้างที่มีอยู่ทั้งหมดตามความกว้างของหน้าต่างเบราเซอร์ที่เปิดอยู่ ความกว้าง
หากคุณไม่ได้กำหนดค่าใด ๆ ในเอกสารของคุณเบราว์เซอร์จะไหลเนื้อหาโดยอัตโนมัติเพื่อเติมเต็มความกว้างทั้งหมดของหน้าต่าง (ความกว้าง 100% เป็นค่าเริ่มต้น) ค่าความสูงจะคำนวณแตกต่างจากความกว้าง ในความเป็นจริงเบราว์เซอร์ไม่ได้ประเมินความสูงเลยเว้นแต่ว่าเนื้อหาจะยาวเกินไปที่จะไปนอกวิวพอร์ต (ดังนั้นต้องใช้แถบเลื่อน) หรือถ้านักออกแบบเว็บกำหนดองค์ประกอบที่แน่นอนบนหน้าเว็บ ความสูง
มิฉะนั้นเบราว์เซอร์จะช่วยให้การไหลเวียนของข้อมูลภายในความกว้างของวิวพอร์ตจะสิ้นสุดลง ความสูงไม่ได้คำนวณจริงเลย ปัญหาเกิดขึ้นเมื่อคุณกำหนดเปอร์เซ็นต์ความสูงขององค์ประกอบที่มีองค์ประกอบหลักโดยไม่ตั้งความสูง - กล่าวคือองค์ประกอบหลักจะมีค่าเริ่มต้น ความสูง: อัตโนมัติ;
คุณมีผลขอให้เบราว์เซอร์คำนวณความสูงจากค่าที่ไม่ได้กำหนดไว้ ตั้งแต่ที่จะเท่ากับค่า null ผลคือเบราเซอร์ไม่ทำอะไรเลย ถ้าคุณต้องการกำหนดความสูงบนหน้าเว็บของคุณเป็นเปอร์เซ็นต์คุณต้องกำหนดความสูงของ ทุกๆ องค์ประกอบหลักของหนึ่งที่คุณต้องการกำหนดความสูง กล่าวอีกนัยหนึ่งถ้าคุณมีหน้าเว็บเช่นนี้: เนื้อหาที่นี่
คุณน่าจะต้องการ div
และวรรคในนั้นจะมีความสูง 100% แต่ div นั้นมีอยู่จริง สอง องค์ประกอบหลัก: และ. เพื่อกำหนดความสูงของ div
ความสูงสัมพัทธ์คุณต้องตั้งค่าความสูงของ ร่างกาย
และ HTML
องค์ประกอบเช่นกัน ดังนั้นคุณจะต้องใช้ CSS เพื่อกำหนดความสูงไม่เพียง แต่ div เท่านั้น แต่ยังรวมถึงองค์ประกอบ body และ HTML นี่เป็นสิ่งที่ท้าทายเนื่องจากคุณสามารถรับทุกอย่างได้อย่างรวดเร็วด้วยความสูง 100% เพียงเพื่อให้ได้ผลลัพธ์ที่ต้องการ ตอนนี้คุณรู้วิธีกำหนดความสูงขององค์ประกอบของหน้าเว็บให้เป็น 100% แล้วการออกไปทำในทุกๆหน้าอาจเป็นเรื่องที่น่าตื่นเต้น แต่มีบางสิ่งที่คุณควรระวัง: ในการแก้ไขปัญหานี้คุณสามารถตั้งค่าความสูงขององค์ประกอบด้วย หากคุณตั้งค่าไว้ รถยนต์
แถบเลื่อนจะปรากฏขึ้นหากจำเป็น แต่จะหายไปเมื่อไม่ได้ที่แก้ไขการแบ่งภาพ แต่จะเพิ่มแถบเลื่อนที่คุณอาจไม่ต้องการ อีกวิธีหนึ่งที่คุณสามารถจัดการกับความท้าทายนี้คือการทดสอบกับ CSS Viewport Units เมื่อใช้หน่วยวัดความสูงของวิวทิวทัศน์คุณสามารถกำหนดขนาดองค์ประกอบเพื่อให้ได้ความสูงที่กำหนดไว้ของวิวพอร์ตและจะเปลี่ยนไปเมื่อวิวพอร์ตเปลี่ยนไป! นี่เป็นวิธีที่ดีในการสร้างภาพความสูง 100% ของคุณบนหน้าเว็บ แต่ก็ยังมีความยืดหยุ่นสำหรับอุปกรณ์และขนาดหน้าจอที่ต่างกัน เพราะเหตุใดเปอร์เซ็นต์ความสูงจึงล้มเหลว
บางสิ่งที่ควรทราบเมื่อทำงานกับความสูง 100%
การใช้ Viewport Units
