添加fireplace图片后wall div意外垂直扩张，50/50布局失衡求助

核心问题 #

你的wrapper使用display: grid但未定义行结构，导致内部两个div无法自动均分高度。再加上#wall设置了height: 100%，而图片用了固定的20vh高度，当图片高度超过网格行的默认分配空间时，就会把#wall撑开，超出wrapper范围。

修复步骤 #

1. 给wrapper定义明确的网格行，让两个子元素各占一半高度：
   在.wrapper中添加grid-template-rows: 1fr 1fr;，两行会均分wrapper的85vh高度。
2. 移除#wall和#container的height: 100%，改用网格的自动填充机制，避免内容撑开容器。
3. 限制图片在#wall内的高度，用百分比高度代替固定20vh，防止图片超出父容器范围。

修复后的完整代码 #

.wrapper {
  display: grid;
  grid-template-rows: 1fr 1fr; /* 均分两行高度 */
  place-items: stretch; /* 让子元素填充对应网格单元格 */
  height: 85vh;
  width: 85vw;
}

#container {
  background-color: antiquewhite;
  z-index: 0;
  width: 100%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

#wall {
  background-color: darkred;
  z-index: 1;
  width: 100%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.fireplace {
  height: 80%; /* 相对于#wall高度调整，避免溢出 */
  width: auto;
}

补充说明 #

• grid-template-rows: 1fr 1fr让两行各占wrapper高度的50%，1fr代表剩余空间的等分份额。
• place-items: stretch会让子元素自动填充对应网格单元格，无需手动设置height:100%。
• 图片使用百分比高度可确保不会超出#wall范围，你可以根据视觉需求调整这个百分比数值。

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