将高度设置为100vh可以工作，但在移动浏览器中会出现滚动条
将高度设置为100vh可以工作，但在移动浏览器中会出现滚动条
提问于 2020-03-12 23:45:35
我有一个以登录屏幕为中心的网站。这在所有浏览器中都是完美的，但当我在我的android手机上打开它时，页面会出现滚动条，我想这是因为我的移动浏览器上的导航菜单在我向下滚动网页时消失了。
body{
margin:0;
}
.centered_layout {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}<div class="centered_layout">
Centered app
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-13 00:12:26
这是移动浏览器(Bug)中的一个已知问题，在IOS中也是如此。你可以在这里阅读更多信息：The trick to viewport units on mobile
解决方案是使用JavaScript计算"window.innerHeight"：
const appHeight = () => {
document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`)
};
window.addEventListener('resize', appHeight);
appHeight();html, body {
margin: 0;
font-family: sans-serif;
}
.centered_layout {
display: grid;
place-items: center;
height: 100vh;
height: var(--app-height, 100vh);
}<div class="centered_layout">
Centered app
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60657502
复制相关文章
相似问题
腾讯云开发者
