100vh หมายถึงอะไร?

100vh หมายถึงอะไร?
100vh หมายถึงอะไร?
Anonim

CSS3 ให้หน่วยที่สัมพันธ์กับวิวพอร์ตแก่เรา 100vw หมายถึง 100% ของความกว้างของวิวพอร์ต 100vh; สูง 100%.

100vh เหมือน 100% ไหม

ตัวอย่างเช่น หน่วยวิวพอร์ตอาจมีประโยชน์เมื่อพยายามสร้างสแต็กองค์ประกอบที่มีความสูง/ความกว้างเท่ากัน … ในทางตรงกันข้าม ความสูง: 100vh จะเป็น 100% ของความสูงของวิวพอร์ต ไม่ว่าองค์ประกอบนั้นจะอยู่ที่ใดใน DOM

VH หมายถึงอะไรใน CSS

vh & vw. vh ย่อมาจาก viewport height และ vw ใช้สำหรับความกว้างของวิวพอร์ต ดังนั้น การตั้งค่าองค์ประกอบเป็นค่าความกว้าง 50vw หมายความว่าองค์ประกอบนั้นจะมีความกว้างที่ 50% ของขนาดวิวพอร์ต และจะยังคงเป็นจริงเมื่อวิวพอร์ตถูกปรับขนาด

ฉันจะเปลี่ยนความสูงเป็น 100vh ได้อย่างไร

สูง: 100vh; หมายถึง ความสูงขององค์ประกอบนี้เท่ากับ 100% ของความสูงของวิวพอร์ต ตัวอย่าง: ความสูง: 50vh; หากความสูงของหน้าจอคือ 1000px ความสูงขององค์ประกอบจะเท่ากับ 500px (50% ของ 1000px) ความสูง: คำนวณ (100% - 100px); จะคำนวณขนาดขององค์ประกอบโดยใช้ค่าขององค์ประกอบ

ทำไมความสูง 100% ถึงไม่ทำงาน

หากคุณจะลองตั้งค่าความสูงของคอนเทนเนอร์ div เป็น 100% ของหน้าต่างเบราว์เซอร์โดยใช้ความสูงของกฎรูปแบบ: 100%; มันใช้งานไม่ได้เพราะเปอร์เซ็นต์ (%) คือ หน่วยสัมพัทธ์ ดังนั้นความสูงที่ได้จึงขึ้นอยู่กับความสูงขององค์ประกอบหลัก

แนะนำ: