Javascript Flexbox页脚在移动设备上未正确定位

我使用Flexbox在页面中显示页眉、中间和页脚。页脚总是在底部。中间部分使用

flex-grow:1

展开，以便所有三个元素都能很好地配合页面

这在桌面浏览器上非常有效。在移动浏览器上，我无法使布局响应移动浏览器的url栏/工具栏的显示和隐藏

使用

100vh

或

100%

，因为高度不考虑移动设备上的这些杆

我尝试添加javascript来响应窗口调整/滚动，但这似乎只有一半的时间有效

使用Javascript似乎有点老套，有没有一种CSS唯一的方法可以将移动url栏考虑在内

即使url栏显示和隐藏，我如何将flex项目放置在手机页面的底部

const-app=document.querySelector（“app”）
addEventListener（“调整大小”，（）=>resize（））
addEventListener（“滚动”，“调整大小（）”）
函数resize（）{
console.log（“调整窗口大小”）
app.style.height=window.innerHeight+“px”；
}

正文{
边距：0；填充：0；
}
应用程序，部分{
框大小：边框框；
}
应用程序{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
边框：4px纯蓝色；
}
.标题{
背景色：#4cc；
}
.中{
柔性生长：1；
背景色：#cc4；
}
.页脚{
背景色：#4cc；
}

标题
中间的
页脚

也许这对你有用？一开始这似乎是可行的，但当您滚动时，整个视图向上滚动，并在页脚下方显示一个空白。这是因为视口高度现在大于应用程序高度，所以您可以滚动。也许这对您有用？一开始这似乎是可行的，但当您滚动时，整个视图向上滚动，并在页脚下方显示一个空白。这是因为视口高度现在大于应用程序高度，因此可以滚动。