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

Question

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

.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;
}

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

Answer 1

我认为这可以为您提供帮助！

body {
  overflow: hidden;
}

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