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