如何让黑色容器内id为circle的彩色矩形自适应高度作为侧边栏？[CSS]

没问题，这事儿不用给#circle设自定义高度，用CSS就能让它自动撑满黑色容器的高度，不管容器尺寸怎么变。我给你几个实用的方案：

方案一：Flexbox布局（推荐） #

这是最简洁现代的方式，利用Flexbox的默认对齐特性就能搞定：

/* 黑色容器（父元素） */
.black-container {
  display: flex;
  /* 这里可以设你需要的宽度、高度，或者让它随内容自适应 */
  width: 800px;
  height: 400px;
  background-color: #000;
}

/* 侧边栏#circle */
#circle {
  flex: 0 0 60px; /* 固定宽度，不伸缩 */
  background-color: #ff4466; /* 你需要的彩色 */
  /* 不用设height！自动匹配父容器高度 */
}

原理：当父容器设为display: flex时，子元素默认会在交叉轴（垂直方向）上拉伸对齐，所以#circle的高度会自动和父容器保持一致，完全填满上下空间。

方案二：Grid布局 #

如果你用Grid布局也能轻松实现：

.black-container {
  display: grid;
  grid-template-columns: 60px 1fr; /* 第一列是侧边栏宽度，第二列占剩余空间 */
  width: 800px;
  height: 400px;
  background-color: #000;
}

#circle {
  background-color: #ff4466;
  /* 同样不需要设height，网格项默认填满单元格高度 */
}

方案三：绝对定位（兼容旧浏览器） #

如果需要兼容一些老浏览器，绝对定位也是个可靠的选择：

.black-container {
  position: relative; /* 父容器设为相对定位，作为参考 */
  width: 800px;
  height: 400px;
  background-color: #000;
}

#circle {
  position: absolute;
  top: 0;
  bottom: 0; /* 同时设top和bottom为0，强制撑满上下 */
  left: 0;
  width: 60px;
  background-color: #ff4466;
}

小提示 #

• 我更推荐Flexbox或Grid，它们的代码更简洁，而且后续如果要调整布局（比如加其他元素），扩展性更好。
• 不管用哪个方案，都不要给#circle设置固定高度，让它自动继承或撑满父容器的高度就行。

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