IOS端grid-template-rows的1fr属性无法正常工作问题求助

这个问题我之前做移动端布局时也碰到过，iOS的WebKit内核（Chrome和Safari都基于它）对CSS Grid的fr单位计算确实存在一些兼容性小坑，尤其是当父容器用position: fixed + height: 100%的组合时，很容易出现可用空间计算错误，导致1fr直接撑满整个视口，忽略了上下固定元素的高度。

问题根源 #

iOS WebKit处理1fr时，默认等价于minmax(auto, 1fr)。当中间区域的内容高度不确定（比如为空或未设固定高度），auto会被错误解析为视口的全部高度，而不是扣除上下固定元素后的可用空间，这就导致中间区域把头部和底部挤出去或者覆盖掉。

解决方案 #

这里有两种可靠的修复方式，你可以根据需求选择：

方案1：用minmax(0, 1fr)替代1fr（优先推荐）

修改.pageContainer的grid-template-rows属性，把1fr换成minmax(0, 1fr)，强制中间区域高度不超过可用空间，同时确保根元素高度继承正确：

/* 先确保根元素高度正确继承 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 防止页面整体滚动干扰 */
}

.pageContainer { 
    width: 100%; 
    grid-template-rows: 100px minmax(0, 1fr) 100px; /* 关键修改 */
    display: grid; 
    height: 100%; 
    position: fixed; 
    grid-template-areas: "header" "main" "footer";
}

header { 
    grid-area: header; 
    display: flex; 
    justify-content: center; /* 修正：flex布局用justify-content而非justify-items */
    align-items: center; 
    position: static; 
} 

article { 
    grid-area: main; 
    height: 100%; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; /* 提升iOS滚动流畅度 */
} 

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

修改说明：

• minmax(0, 1fr)：强制中间区域高度不超过可用空间，避免iOS错误计算auto值。
• 根元素设置height:100%：确保.pageContainer的height:100%能正确继承视口高度。
• 修正header的justify-items为justify-content：justify-items是Grid布局属性，Flex布局需要用justify-content实现水平居中。
• 添加-webkit-overflow-scrolling: touch：让iOS上的滚动更接近原生流畅体验。

方案2：用calc()直接计算中间高度

如果方案1还是有问题，可以直接用calc()计算中间区域高度，绕过fr单位的兼容性问题：

.pageContainer { 
    width: 100%; 
    grid-template-rows: 100px calc(100vh - 200px) 100px; /* 直接计算中间高度 */
    display: grid; 
    height: 100vh; /* 改用100vh确保容器占满视口 */
    position: fixed; 
    grid-template-areas: "header" "main" "footer";
}

适配安全区域说明：如果需要兼容iOS刘海屏、底部工具栏，可调整计算式：

grid-template-rows: 100px calc(100vh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) 100px;

同时需要在meta标签中设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

总结 #

优先选方案1，它更符合CSS Grid的布局逻辑，适配性更强；如果遇到极端兼容性问题，再尝试方案2。两种方法都能实现你需要的「头部底部固定，中间区域可滚动」的布局效果。

内容的提问来源于stack exchange，提问作者yarek