Html CSS网格divs高度自动调整

如何使高度自动启用

.text

和

.img

divs而不是100%高度

*{
边际：0px；
填充：0px；
}
html，
身体，
.开始{
身高：100%；
}
.标题{
高度：80px；
背景：蓝色；
}
.滑块{
高度：计算（100%-80px）；
背景：红色；
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1；
网格模板区域：“文本img”；
}
.文本{
网格区域：文本；
背景：绿色；
}
.img{
网格面积：img；
背景：黄色；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.滑块{
网格模板区域：“文本”“img img”；
}
}

页面标题
你好
提特罗
Lorem ipsum dolor sit amet，奉献精英。因此，铜酸盐是一种罪魁祸首，但因其本身的缺陷而导致的严重后果除外。阿特克，埃尤斯，威尔！伊普萨，布兰迪提斯

提特罗
Lorem ipsum dolor sit amet，奉献精英。因此，铜酸盐是一种罪魁祸首，但因其本身的缺陷而导致的严重后果除外。阿特克，埃尤斯，威尔！伊普萨，布兰迪提斯

编辑

添加了网格周围的容器，以允许背景样式

---

只需删除.slider元素的height属性。.img和.text元素占用了剩余的空间来填充额外的空间

*{
边际：0px；
填充：0px；
}
html，
身体，
.开始{
身高：100%；
}
.标题{
高度：80px；
背景：蓝色；
}
.身体背景{
高度：计算（100%-80px）；
/*在此处应用背景*/
}
.滑块{
背景：红色；
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：1fr；
网格模板区域：“文本img”；
}
.文本{
网格区域：文本；
背景：绿色；
}
.img{
网格面积：img；
背景：黄色；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.滑块{
网格模板区域：“文本”“img img”；
}
}

页面标题
你好
提特罗
Lorem ipsum dolor sit amet，奉献精英。因此，铜酸盐是一种罪魁祸首，但因其本身的缺陷而导致的严重后果除外。阿特克，埃尤斯，威尔！伊普萨，布兰迪提斯

提特罗
Lorem ipsum dolor sit amet，奉献精英。因此，铜酸盐是一种罪魁祸首，但因其本身的缺陷而导致的严重后果除外。阿特克，埃尤斯，威尔！伊普萨，布兰迪提斯

对齐项目：灵活启动？Im以flex开始，ty使用
对齐内容：flex开始然后我想放一个100%的背景图像你想背景图像覆盖整个页面还是只覆盖标题下的内容？在100%-80px下