CSS如何在某个盒子内进行滚动

我需要将导航栏固定在顶部然后页面纵向被撑满了需要使用滚动条，之前看网上的解答是给body设置overflow:auto，给导航栏设置position:fixed。这样虽然可以实现但是我总感觉怪怪的，而且感觉复杂。我的现在有一个想法：把导航栏放进一个盒子a，剩下的主体页面放进盒子b，我只需要将盒子a固定在浏览器顶部，然后在盒子b里进行滚动不就可以吗？CSS小白，请问各路大神这种思路可以实现吗？

吸附定位，有奇效

<body>
  <div style="position: sticky; top: 0; height: 30px; background: tomato;"></div>
  <div style="height: 2000px; background-image: linear-gradient(to bottom, brown, skyblue);"></div>
</body>

可以实现下面是代码方式很多

<div>
  <div style="height: 30px;"></div>
  <div style="height: calc(100% - 30px);overflow:none;overflow-y:auto"></div>
</div>

我试过这样去实现，给盒子b设置了overflow：auto，并不能显示出滚动条，而且我页面已经撑满了，底下的部分被遮起来了

可以是可以，但是你这相比网上的解决方案也不方便啊，不过前端实现效果可以有很多种方法，你的想法完全可行，只是也一样的得设置，我是认为两种都不麻烦，但是按你的说法应该是每种方法都挺麻烦

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html {
      height: 100%;
      width: 100%;
    }
    body {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    #boxa {
      background-color: black;
      height: 70px;
    }
    #boxb {
      background-color: aqua;
      flex: 1;
      overflow: auto;
    }
  </style>

  <body>
    <div id="boxa"></div>
    <div id="boxb">
      <div style="height: 10000px">内容</div>
    </div>
  </body>

  <script></script>
</html>