Html 固定页眉或页脚，内部有响应CSS网格布局

我需要做一个网页的页脚是固定的，并在页脚内的内容是使用CSS网格布局

但当我应用

位置时：固定
我怎样才能做到这一点



html，正文{
填充：0；
保证金：0；
}
img{
宽度：100%；
}
.图像网格{
最大宽度：100%；
显示：网格；
网格模板柱：1fr 1fr 1fr；
栅柱间隙：2米；
网格行间距：计算值（2em-0.22em）；
左：2米；
右侧填充：2米；
垫面：2米；
填料底部：钙（2em-0.22em）；
}
.页脚网格{
显示：网格；
网格模板柱：1fr 1fr 1fr；
栅柱间隙：2米；
网格行间距：计算值（2em-0.22em）；
垫面：2米；
垫底：2米；
左：2米；
右侧填充：2米；
底部：0；
背景颜色：绿色；
不透明度：0.75；
}
李{
列表样式类型：无；
}
保险商实验室{
填充：0；
}
.固定页脚网格{
显示：网格；
网格模板柱：1fr 1fr 1fr；
栅柱间隙：2米；
网格行间距：计算值（2em-0.22em）；
垫面：2米；
垫底：2米；
左：2米；
右侧填充：2米；
底部：0；
背景色：红色；
不透明度：0.75；
}
.固定页脚网格容器{
位置：固定；
底部：0；
}


正确的列布局


正确的列布局
正确的列布局
正确的列布局
正确的列布局
正确的列布局


但需要在底部固定位置


列宽不正确


列宽不正确
列宽不正确
列宽不正确
列宽不正确
列宽不正确


需要100%的屏幕宽度

由于您的固定位置元素已从文档流中删除，因此它不会像流内块元素那样自动扩展全宽。您需要指定其尺寸

将此添加到您的代码中：

.fixed-footer-grid-container {
    position: fixed;
    bottom: 0;
    width: 100%; /* new */
}