网站教程

经常会遇到需要使用剩余高度来最大化显示内容的情况，比如想利用剩余高度显示内容，而不想让页面出现滚动条 主体固定高度 推荐使用 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; }