CSS占满剩余高度

经常会遇到需要使用剩余高度来最大化显示内容的情况，比如想利用剩余高度显示内容，而不想让页面出现滚动条

主体固定高度

推荐使用calc

主体固定高度比较简单直接用calc

.container {
  height: 100vh;
}
.title {
  height: 30px;
}
.content {
  height: calc(100% - 30px);
}

主体自适应高度

推荐使用 Flex 布局

弹性布局，title 高度变化不影响布局，body 将自动占满剩余空间。

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.title {
  height: auto;
}
.content {
  height: calc(100% - 30px);
  flex: 1;
}