css 剩余高度

CSS中的剩余高度是指元素中没有被其他内容占用的空闲高度。在设计响应式界面时，我们通常需要针对元素的剩余高度进行一些样式的调整，以达到更好的布局效果。

实现元素的剩余高度需要使用一些CSS属性来配合，如height，min-height和max-height。其中，height属性用于设置元素的高度，如果设置为auto，则会自动根据元素内容进行调整，直到填满整个元素。

而min-height和max-height则用于限制元素的最小和最大高度。当元素内容未填满整个元素时，min-height会使元素继续增高，直到达到最小高度。而当元素内容超出了最大高度，max-height会使元素裁剪掉超出部分。

有时候，我们可能需要让元素占据整个父元素的剩余高度。这时可以使用calc()函数来计算剩余高度。例如：

.parent{
  height: 100%;
}

.child{
  min-height: calc(100% - 50px);
}

上面的代码中，.parent元素的高度被设置为100%，即占据整个视口的高度。而.child元素使用calc()函数来计算自己的最小高度，减去了50px的空间留给其他元素。这样，.child元素就占据了剩余的全部高度。