如何点击按钮用JavaScript仅增大白色div高度且不影响黄色div？

你使用的CSS Grid布局中，父容器.abc的行轨道配置为grid-template-rows: repeat(8, [row-start] 1fr)，fr单位会按比例分配网格容器的可用高度：

• 当你把白色.content的高度改为300px后，整个网格容器的总高度被撑大，每个1fr对应的实际像素值随之升高
• 黄色.img元素设置了grid-row: row-start / span 6，默认会拉伸填满6个行轨道的高度，所以会跟着同步变高

按下面的步骤修改即可让黄色盒子高度保持不变：

1. 给黄色.img元素添加两个属性，取消默认拉伸、设置固定高度：

.img {
  /* 原有属性保留，新增以下内容 */
  align-self: start;
  height: 200px; /* 这里填你需要的固定高度值即可 */
}

2. 建议修改JS函数名，避免和父容器的类名abc重名导致部分浏览器出现作用域冲突：
   把JS函数改为：

function increaseContentHeight() {
  document.querySelector(".content").style.height = "300px";
}

对应的按钮点击事件也修改：

<button onclick="increaseContentHeight()">click</button>

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