嘿，我来帮你搞定这个两栏等高的问题！你设置height:100%没生效的核心原因很简单——CSS的百分比高度是基于父元素的实际高度计算的，但你的.fluid-fixed容器只有position: relative，没设置明确的高度值，浏览器根本不知道“100%”到底对应多少像素，所以这个属性自然不起作用。

下面给你几个实用的解决方案，从现代简洁到兼容旧浏览器的都有，你可以根据需求选：

方法1：用Flexbox实现（首推，省心又高效） #

Flexbox是现在做等高布局最舒服的方式，只需要改容器的样式，现有代码调整很少：

首先修改.fluid-fixed的CSS：

.fluid-fixed { 
  position: relative; 
  display: flex; /* 开启Flex布局 */
  gap: 20px; /* 可选：设置两栏之间的间距，替代原来的margin */
}

然后调整几个元素的样式，去掉浮动和负margin这些旧布局的属性：

.content-wrapper { 
  width: 100%; /* 让左侧自适应填满剩余空间 */
}
.content { 
  /* 删掉原来的margin-right: 342px; */
  clear: both; 
  overflow: auto; 
}
.sidebar { 
  position: static; /* 去掉relative */
  width: 322px; 
  /* 删掉margin-left: -322px; 和 float: right; */
  overflow: hidden; 
  background: #fff; 
}

Flexbox会自动让容器里的子元素高度和最高的那个保持一致，完美实现等高，而且代码简洁，兼容性也很好（现在主流浏览器都支持）。

方法2：传统伪元素技巧（兼容旧浏览器） #

如果需要兼容IE这类旧浏览器，可以用这个经典的“溢出裁剪”方法：

先给.fluid-fixed加个overflow: hidden：

.fluid-fixed { 
  position: relative; 
  overflow: hidden; /* 关键：裁剪溢出的内容 */
}

然后给容器加个伪元素，用来撑开高度：

.fluid-fixed::before {
  content: "";
  float: left;
  width: 100%;
  height: 100%;
  margin-bottom: -9999px; /* 用负margin让高度溢出 */
  padding-bottom: 9999px; /* 补回空间，避免内容被裁掉 */
}

最后给.content和.sidebar也加上相同的负margin和padding：

.content, .sidebar {
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-top: 10px;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

这个方法的原理是用超大的负margin让元素高度超出容器，再通过容器的overflow:hidden把多余部分裁掉，视觉上就实现了等高。

方法3：Grid布局（更灵活的现代方案） #

Grid布局比Flexbox更适合复杂布局，实现等高也超简单：

修改.fluid-fixed的CSS：

.fluid-fixed { 
  position: relative; 
  display: grid;
  grid-template-columns: 1fr 322px; /* 第一列自适应，第二列固定322px */
  gap: 20px; /* 两栏之间的间距 */
}

然后去掉.content-wrapper的浮动和宽度，Grid会自动处理布局：

.content-wrapper { 
  /* 删掉float: left; 和 width: 100%; */
}

Grid默认会让同一行的所有单元格高度相等，同样能完美实现等高，而且后续如果要调整布局，比如加栏、改比例，都很方便。

另外你的响应式媒体查询可以保留，比如在小屏幕隐藏侧边栏，只需要对应调整不同方法下的样式就行（比如Flexbox下可以加flex-direction: column;让两栏竖排，或者直接隐藏sidebar）。

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