在 IOS grid-template-rows 上不能与“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 上运行良好， grid-template-rows: 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

刚刚用 minmax

解决了这个问题

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