如何在Svelte中构建适配浏览器的12×12网格（解决100vh溢出）

问题根源 #

100vh 是基于静态视口高度计算的，会包含浏览器的地址栏、底部导航栏这类动态UI元素的高度。当这些UI栏显示或隐藏时，实际可用的内容高度会变化，就会导致你的12×12网格超出浏览器可视区域，出现底部空白。

方案1：使用动态视口单位 dvh #

这是最简洁的现代解决方案，dvh（Dynamic Viewport Height）会自动适配浏览器当前的可用视口高度，自动排除动态UI栏的占用空间。修改你的CSS代码：

#global_grid{
    display: grid;
    grid-template-columns: repeat(12, calc(100vw / 12));
    grid-template-rows: repeat(12, calc(100dvh / 12));
}

替换后，网格总高度会精准匹配浏览器当前的实际可用内容高度，不会再出现底部空白。

方案2：兼容旧浏览器的html/body高度继承法 #

如果需要兼容不支持dvh的旧版浏览器（比如iOS 15及以前的Safari），可以用这个方法：
首先给根元素设置高度并清除默认边距：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 防止页面整体滚动 */
}

然后修改网格的高度配置：

#global_grid{
    display: grid;
    grid-template-columns: repeat(12, calc(100vw / 12));
    grid-template-rows: repeat(12, calc(100% / 12));
    height: 100%;
}

网格会继承body的高度，而body的高度就是浏览器的可用内容高度，完美规避100vh的缺陷。

方案3：固定定位强制铺满可视区 #

还有一种更直接的思路，给网格设置固定定位，让它直接填满浏览器的可视区域，同时用1fr自动平分行列，代码更简洁：

#global_grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}

1fr会自动把容器的宽/高分成12等份，固定定位则确保网格刚好贴合浏览器可视区域的边界，不会出现超出或空白。

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