Html 如何制作几个纵横比div以填充剩余屏幕高度？

我正在尝试制作一个日历式的显示器，它会填满屏幕高度的剩余空间，但我似乎无法做到这一点

我的预期结果如下所示：

---------------> top of screen (bottom of browser's address bar -- also start of page)
<!-- some header content -->
<!-- the calendar is here and should be fully shown -->
---------------> bottom of screen
<!-- there're a few extra content here generated through ajax -->
---------------> bottom of page

一些以前添加的内容
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐

如果可以，最好使用CSS网格而不是Flexbox来实现所需的布局，它更适合于二维布局。以下是您可以如何实现它：

为了使顶部内容和日历视图占据屏幕的整个高度，您可以将它们包装在一个元素中，并将其高度设置为

100vh

，该高度等于视口高度

body{margin:0；}
.包装纸{
高度：100vh；
显示：网格；
网格模板列：重复（7，1fr）；
网格模板行：自动重复（4，1fr）；
网格间距：2px；
}
.标题{
网格柱：1/8；
网格行：1；
背景颜色：金色；
}
.天{
背景色：红色；
}

某些标题内容

更多内容
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
一些额外的内容

如果可以，最好使用CSS网格而不是Flexbox来实现所需的布局，它更适合于二维布局。以下是您可以如何实现它：

为了使顶部内容和日历视图占据屏幕的整个高度，您可以将它们包装在一个元素中，并将其高度设置为

100vh

，该高度等于视口高度

body{margin:0；}
.包装纸{
高度：100vh；
显示：网格；
网格模板列：重复（7，1fr）；
网格模板行：自动重复（4，1fr）；
网格间距：2px；
}
.标题{
网格柱：1/8；
网格行：1；
背景颜色：金色；
}
.天{
背景色：红色；
}

某些标题内容

更多内容
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
一些额外的内容

如果您不想使用css网格，可以使用以下内容：

---------------> top of screen (bottom of browser's address bar -- also start of page)
<!-- some header content -->
<!-- the calendar is here and should be fully shown -->
---------------> bottom of screen
<!-- there're a few extra content here generated through ajax -->
---------------> bottom of page

。添加了top{
高度：50px；
背景颜色：金色；
}
.外部响应{
高度：计算（100vh-50px）；
显示：块；
位置：相对位置；
}
.行包装器{
显示：块；
位置：相对位置；
身高：25%；
字号：0；
}
.比率1_1{
宽度：14.2%；/*一周7天*/
身高：100%；
显示：内联块；
边框：1px实心rgb（235235235）；
右边框：0px；
框大小：边框框；
}
.ratio1\u 1>.content{
背景色：红色；
宽度：100%；
身高：100%；
位置：相对；/*如果您想在其中包含文本*/
}
.ratio1_1.文本{
位置：绝对位置；
字体大小：14px；
排名：0；
左：0；
底部：0；
右：0；
}

一些以前添加的内容
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚