css - 为什么导航栏出现在滚动条的顶部？

导航栏似乎在滚动条的顶部（请注意水平线），但是我希望它在滚动条旁边结束。

.header {
    position: fixed;
    z-index: 102;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    height: 40px;
    left: 0px;
    right: 0px;
}

.header-content {
    max-width: 1400px;
    margin: 0px auto;
    position: relative;
    background-color: white;
}

.app {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

我以前从未见过这种情况，并且对为什么发生这种情况感到困惑。
如何使导航栏在滚动条旁边结束？

最佳答案

我认为这可以帮助您！

body {
  overflow: hidden;
}

.app {
  top: 40px;
  position: absolute;
  width: 100%;
  height: calc(100% - 40px);
  overflow-y: scroll;
}