css สำหรับทำ 100vh ใน mobile

ใน CSS ความสูง 100vh คือสูงเท่ากับพื้นที่หน้าจอ แต่ว่า Browser บนมือถือมันดันแสดงแถบด้านล่างแล้วซ่อน ทำให้ 100vh อาจจะสูงเกินกว่าที่เราคิดทางแก้คือใช้ -webkit-fill-available;

ตัวอย่างโค้ด

body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}

ที่มา

css-tricks.com