在 IOS 网格模板行上也无法正常工作"1fr"

Question

我在IOS上遇到了一个奇怪的问题(chrome，safari(：

.pageContainer {
width: 100%;
grid-template-rows: 100px 1fr 100px;
display: grid;
height: 100%;
position: fixed;
grid-template-areas:
"header"
"main"
"footer"
}

它在PC(chrome，android(，Android，MacOS(包括Safari(上运行良好，但在IOS上， 网格模板行：100px 1fr 100px只会制造麻烦： 看起来 IOS 无法正确处理 1fr 并且占用整个屏幕而不是可用空间。

在IOS上，我必须使用一个固定值来给出正确的值 喜欢 100px 500px 100px

header {
grid-area: header;
display: flex;
justify-items: center;
align-items: center;
position: static;
}
article {
grid-area: main;
height: 100%;
overflow: auto;
}
footer {
display: flex;
grid-area: footer;
align-items: center;
width: 100%;
max-width: 100vw;
overflow-x: auto;
overflow-y: hidden;
position: static;
}

我的布局有一个静态的页眉和页脚，文章可以滚动。

Answer 1

刚刚用最小最大值解决了这个问题

grid-template-rows: 100px minmax(200px,1fr) 100px;