手机端安装height:100vh时,用Chrome进行模拟是正常的
实际浏览时,100vh的高度超过窗口的实际高度,显示滚动条。
* {
padding: 0;
margin: 0;
border: 0;
outline: 0;
盒尺寸: border-box;
}
html {
width: 100vw;
height: 100vh;
border : 5px固态硬盘;
Overflow :隐藏;
}
图:
使用height:100%时不能。 和画面的高度一样。
* {
padding: 0;
margin: 0;
border: 0;
outline: 0;
盒尺寸: border-box;
}
html {
width: 100%;
height: 100%;
border : 5px固态硬盘;
Overflow :隐藏;
}
图:
不仅是safari,移动端Chrome也是如此。
accordingtodevelopers.googlethevhisalwayscalculatedasiftheurlbarishiddensincechromeversion 56
所以,vh获取的是隐藏地址栏和状态栏的窗口高度?
但是,在实际开发中,也推荐使用vw、vh单位。
jw dhm :在height : % 100 %复杂的场景中,可能会出现意外
回答
你的理解基本上是正确的,所以说正确的吧
html,body{
height :-WebKit-fill-available;
}
楼主解决了吗