适用于iOS的Chrome与<style> height:100vh; </style>

时间:2017-09-29 17:20:06

标签: javascript css iphone google-chrome

当用户向上滚动时,Chrome for iOS会隐藏其地址栏。此功能不适用于100vh(或任何vh单位),因为当工具栏缩小时,视口高度会发生变化,因此元素的大小会发生变化。我有一个100vh的封面图片,随着整个页面的长度增加或缩小,它会引起非常明显的抖动。

我认为,使用vh设置的任何高度都存在问题。

我可以(也可能会)使用javascript设置我的封面图片高度,但我更喜欢使用vh

任何聪明的想法?

1 个答案:

答案 0 :(得分:0)

我建议使用100%而不是100vh - 您可以添加此...

body{
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
}

从那里,任何没有另一个具有自己高度的包装的元素都可以使用100%的宽度和高度填充整个屏幕。以下示例!

https://codepen.io/will0220/pen/KXqoGZ