子Div无法填充父Div高度求助（Less语言，height:100%尝试无效）

嘿，我来帮你搞定这个子元素高度填不满父容器的问题！你遇到的这个情况其实是CSS百分比高度的经典坑——当你给子元素设置height: 100%时，父元素必须有一个明确的高度值（不能是默认的auto），否则浏览器没法计算100%对应的实际像素高度，自然就不生效了。结合你给出的Less和HTML代码，我给你几个实用的解决方案：

方案1：给父容器设置明确高度 #

这是最直接的办法，如果父容器的高度是固定的，直接在Less里给它加上高度：

.discount-items-gather {
  border: @border;
  height: 500px; // 给父元素指定具体高度
  .your-child-div { // 替换成你的子Div类名
    height: 100%; // 现在子元素就能完全填满父容器了
  }
}

如果父容器需要自适应视窗高度，可以用vh单位：

.discount-items-gather {
  border: @border;
  height: 100vh; // 占满整个浏览器视窗高度
}

方案2：用Flex布局（更灵活的自适应方案） #

如果你不想固定父容器高度，推荐用Flex布局，这是现代CSS解决高度自适应最靠谱的方式，完全不用依赖百分比高度：

.discount-items-gather {
  border: @border;
  display: flex; // 开启Flex布局
  flex-direction: column; // 按垂直方向排列子元素（按需调整）
  min-height: 400px; // 可选：设置最小高度，避免内容过少时容器太矮
  .your-child-div {
    flex: 1; // 让子元素自动填充父容器的剩余空间
  }
}

这种方式的好处是，父容器高度可以随内容自动调整，子元素会自动填满剩下的空间，不管父容器怎么变都能适配。

针对你用的Row/Col组件的额外提示 #

从你的HTML片段<Row> <Co...>来看，你应该用了Element UI这类组件库，它们的Row和Col默认是没有高度的，所以得先给这些组件加上高度样式：

// 假设组件的类名是.el-row和.el-col
.el-row {
  height: 100%; // 让Row占满外层容器高度
  .el-col {
    height: 100%; // 让Col占满Row的高度
    .discount-items-gather {
      height: 100%; // 现在这个容器就有明确高度了
    }
  }
}

调试小技巧 #

可以给父容器和子元素临时加不同颜色的边框，直观看到它们的高度范围，方便排查问题：

.discount-items-gather {
  border: 2px solid blue; // 父容器边框
  .your-child-div {
    border: 2px solid red; // 子元素边框
  }
}

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