[分享]css两个容器的高度一起变化

在编写CSS时，经常会用到两个容器相互作用的情况。例如，当我们需要让一个容器的高度随着另一个容器的高度变化而变化时，该怎么做呢？其实很简单，只需要使用CSS中的display:flex实现即可。.co...

在编写CSS时，经常会用到两个容器相互作用的情况。例如，当我们需要让一个容器的高度随着另一个容器的高度变化而变化时，该怎么做呢？其实很简单，只需要使用CSS中的display:flex实现即可。

.container {
  display: flex;
  flex-direction: column;
}
.box1 {
  height: 300px;
  background-color: #ccc;
}
.box2 {
  flex: 1;
  background-color: #eee;
} 

以上代码中，container容器设置为flex布局，flex-direction属性设置为column，这意味着子元素会在垂直方向上排列。box1容器设置了一个固定高度，box2容器则使用flex:1将其余空间全部占满，从而实现了两个容器高度同时变化的效果。

通过使用display:flex这个简单的CSS属性，我们可以实现两个容器之间的相互作用，这为我们在设计布局时带来了极大的便利。