ใน CSS ความสูง 100vh คือสูงเท่ากับพื้นที่หน้าจอ แต่ว่า Browser บนมือถือมันดันแสดงแถบด้านล่างแล้วซ่อน ทำให้ 100vh อาจจะสูงเกินกว่าที่เราคิดทางแก้คือใช้ -webkit-fill-available;
ตัวอย่างโค้ด
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
ที่มา
Narongchai Suphiratwanich (K)
นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย