CSS的高度控制是我们在开发网页时需要考虑的重要因素之一。有时候我们需要将一个元素的高度设置为自适应，即填满剩余的高度。那么如何实现这个功能呢？

.parent {
height: 500px;
display: flex;
flex-direction: column;
}
.child {
flex: 1;
}

以上代码实现了将一个父元素的高度设置为500像素，并将其子元素设置为自适应的效果。

首先，我们需要将父元素设置为一个flex容器，这样我们才能使用flex属性进行布局。然后，我们将父元素的flex-direction属性设置为column，表示子元素在父元素中竖直排列。

接着，我们为子元素设置了一个flex属性，这个属性有三个值，分别是flex-grow、flex-shrink和flex-basis。其中，flex-grow表示子元素的放大比例，我们将其设置为1，表示当前子元素会根据剩余空间进行等分。flex-shrink表示子元素的缩小比例，默认为1，flex-basis表示子元素在主轴上的尺寸，默认为auto，即根据内容自适应。

最后，我们为子元素设置了一个类名child，来代表希望被自适应的元素。这样，我们就能够将一个元素的高度设置为自适应，并填满父元素的剩余高度了。