当我们在设计网页时，经常会遇到需要元素占据剩余高度的情况。比如，左侧栏固定高度，右侧内容需要与之并排，占据剩余高度。这时，CSS中有一些方法可以用来计算剩余高度。

首先，我们可以使用CSS3的Flexbox布局来实现剩余高度的计算。在容器元素中加入以下样式：

.container {display: flex;flex-direction: row;height: 100%;}.left {height: 100%;}.right {flex: 1;}

这段代码中，容器元素使用了Flexbox布局，将其子元素分为左侧栏和右侧内容两部分。左侧栏固定高度，右侧占据剩余高度，这是通过为右侧元素设置flex: 1来实现的。

除了Flexbox布局，我们还可以使用CSS中的calc()函数来计算剩余高度。我们可以通过减去其他元素的高度来计算出要占据的剩余高度。例如：

.header {height: 100px;}.content {height: calc(100% - 100px);}

这段代码中，header元素占据了100px的高度，而content元素通过使用calc()函数来计算占据剩余的高度。其中，100%代表父元素高度的100%（即占据全部高度），减去100px的header高度后，就得到了要占据的剩余高度。

总的来说，CSS中有很多方法可以用来计算剩余高度，从Flexbox布局到calc()函数，开发者可以根据具体情况选择最适合自己的方式，来实现元素占据剩余高度的效果。