需求描述
1. 导航栏为固定高度，如30px
2. 下方的内容区高度填满浏览器剩余空间，不出现纵向滚动条
实现思路
对内容区域使用绝对定位，同时指定 top 和 bottom，让内容区域的高度自动撑开，填满浏览器剩余空间
范例代码
<template> <div> <div class="nav">导航栏</div> <div class="content">内容</div> </div> </template> <style scoped> .nav { height: 30px; background: red } .content { position: absolute; top: 30px; bottom: 0px; width: 100%; background: yellow; } </style>
最终效果
