左侧导航栏的高度随滚动变化

需求：

若希望在向下滚动页面时，左侧导航栏的高度保持不变，可以采用固定定位（fixed positioning）来实现。这样可以让导航栏保持在屏幕上方固定位置，不受页面滚动影响。

以下是一个示例代码：

 /* html结构 */
<div class="container">
  <div class="sidebar">
    <!-- 左侧菜单栏 -->
  </div>
  <div class="main-content">
    <!-- 左侧内容区域 -->
  </div>
</div>

 /* css样式 */
sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh; /* 设置菜单栏高度占满视窗 */
  width: 200px; /* 菜单栏宽度 */
  background-color: #f0f0f0;
  overflow-y: auto; /* 添加滚动条 */
}

.main-content {
  margin-left: 200px; /* 确保内容不被导航栏遮挡 */
  padding: 20px;
}

在上述代码中，将左侧导航栏的position属性设置为fixed，并通过top: 0和left: 0将其固定在屏幕左上角。通过设定height: 100vh确保其高度占满视窗，并为左侧导航栏添加overflow-y: auto属性以在内容溢出时显示垂直滚动条。

同时，为确保内容区域不被左侧导航栏遮挡，将内容区域的margin-left设置为左侧导航栏的宽度。这样即可实现左侧导航栏在视窗内固定显示，且内容区域在滚动时不受导航栏高度改变的影响。

注意

直接将容器的高度设置为100%并不会生效，因为元素的高度百分比是相对于其父元素的高度来计算的。
如果父元素没有明确设置高度，或者父元素的高度为auto（默认值），那么容器的高度百分比将无法生效。

因此，如果要让容器的高度显示为100%，需要先确保容器的父元素的高度设置为100%或者具有明确的高度值。

例如

<style scoped lang="scss">
.layout {
    height: 100%;
    .asside {
        background-color: burlywood;
    }

    .header {
        background-color: aquamarine;
    }

    .main {
        background-color: aliceblue;
    }
}
</style>

解决方法：设置容器的高度为视口高度的100%：height: 100vh