如何让静态div的高度与动态内容div的高度保持一致？

你之前设置height:100%不生效的核心原因是：百分比高度需要父元素存在明确可计算的固定高度，而你的中间div高度是内容动态撑开的，父元素没有显式设置高度值，浏览器无法计算100%高度的参考值，自然不会生效。

下面是两种适配动态内容的可靠方案，优先选第一种纯CSS方案，无JS成本、适配所有高度变化场景。

方案1：Flex布局（最推荐） #

这个方案不需要写任何JavaScript，无论中间div的内容怎么加载、高度怎么动态变化，左右侧边栏都会自动和最高的中间栏保持等高，是目前主流的实现方式。

1. 首先把三个div放到同一个父容器内，示例结构：

<div class="container">
  <div id="left" class="sideScoreDiv"></div>
  <div class="middle"></div>
  <div id="right" class="sideScoreDiv"></div>
</div>

2. 给父容器添加Flex相关样式：

.container {
  display: flex;
  align-items: stretch; /* 该属性为默认值，作用是强制所有子元素高度拉伸到和容器内最高元素一致，写上可避免其他样式覆盖 */
  /* 按需设置三个区块的间距，比如gap: 16px; 不推荐用margin控制间距，容易引发布局偏移 */
}

3. 给三个子元素设置宽度相关样式即可，不需要给侧边栏加任何高度属性：

.middle {
  flex: 1; /* 该属性表示中间区块自动占满父容器剩余宽度，如果你的布局是左右侧边栏固定宽度、中间自适应就加这行 */
  /* 保留你之前写的middle其他样式，比如背景、内边距等 */
}
.sideScoreDiv {
  width: 100px; /* 按你的需求设置左右侧边栏的固定宽度即可 */
  /* 保留你之前写的侧边栏其他样式，不需要加height:100% */
}

方案2：JS动态同步高度（兜底方案） #

如果你的现有布局不方便改造成Flex结构，可以用原生JS监听中间div的高度变化，实时同步给两个侧边栏，哪怕后续API更新内容导致中间div高度变化，也能自动同步。

// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  const middleEl = document.querySelector('.middle');
  const leftEl = document.getElementById('left');
  const rightEl = document.getElementById('right');

  // 同步高度的方法
  const updateSideHeight = () => {
    const targetHeight = `${middleEl.offsetHeight}px`;
    leftEl.style.height = targetHeight;
    rightEl.style.height = targetHeight;
  };

  // 注意：如果你是异步请求API渲染内容，要在API数据渲染到middle完成的回调里，第一次调用updateSideHeight()
  updateSideHeight();

  // 监听middle元素的高度变化，任意场景下高度变动都会自动触发同步
  const observer = new ResizeObserver(updateSideHeight);
  observer.observe(middleEl);
});

注意事项 #

不要使用网上流传的overflow: hidden搭配负margin的padding补偿hack写法，这种写法副作用极强，遇到内部有绝对定位元素、滚动区域的场景很容易出现样式异常，目前Flex布局已经在全量浏览器兼容，完全可以替代这类老旧hack。

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