如何让CSS Grid随窗口垂直拉伸，填充剩余空间

嘿，这事儿不难，我帮你调整了CSS代码，完美实现你要的效果——上面的选择栏和表头高度固定，窗口拉伸时只有日历区域自动填充剩余空间，每行还能均匀扩展，完全不会出现滚动条。一起来看具体修改：

关键修改点 #

• 把body设置为垂直方向的Flex容器，让内部元素自动分配垂直空间
• 给.calendar添加flex: 1，让它占据所有剩余垂直空间
• 给日历Grid设置grid-template-rows: repeat(6, 1fr)，让6行高度均匀分配
• 调整日历单元格的内部布局，确保内容正确显示

修改后的完整CSS代码 #

* { box-sizing: border-box; padding: 0px; margin: 0px; } 
html, body { 
  background: #92bde7; 
  color: #485e74; 
  font-family: Tahoma, Geneva, Verdana, sans-serif; 
  height: 100%; 
  /* 新增：设置为垂直flex容器，分配空间 */
  display: flex;
  flex-direction: column;
  /* 防止窗口出现滚动条 */
  overflow: hidden;
} 
.selection { padding: 5px; } 
.header { 
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  text-align: center; 
} 
.header>div { 
  padding: 4px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
} 
/* 现在这个元素会自动填充剩余空间 */
.calendar { 
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  /* 新增：占据所有剩余垂直空间 */
  flex: 1;
  /* 新增：6行，每行高度均匀分配 */
  grid-template-rows: repeat(6, 1fr);
} 
/* 这些单元格会随窗口均匀拉伸 */
.calendar>div { 
  text-align: right; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  padding: 0.5em; 
  /* 新增：内部垂直布局，确保内容正常显示 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
} 
.prev>div, .next>div, .date>div { text-align: left; } 
.prev, .next { background: #c9e6ff; color: #666; } 
.date { background: #f9feff; }

原理说明 #

1. Flex容器布局：body设置为flex-direction: column后，.selection和.header会保持自身的固有高度（不会被拉伸），而.calendar因为设置了flex: 1，会自动占据所有剩余的垂直空间。
2. Grid行均匀分配：grid-template-rows: repeat(6, 1fr)让日历的6行平分.calendar的高度，窗口拉伸时，每行的高度会等比例增加，实现“每行均匀拉伸”的效果。
3. 单元格内部布局：给日历单元格添加display: flex，确保里面的日期和事件内容能自适应单元格高度，不会出现排版错乱。

HTML部分不需要修改，直接使用你原来的代码就可以啦~

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