顶部使用position: fixed;固定且内容高度不固定，下面内容可以滚动，且上面的内容不能遮挡住下面滚动的内容，且两个内容高度必须在100vh里

可以这样实现：

HTML部分：

<div class="container">
  <div class="header">
    <!--顶部内容-->
  </div>
  <div class="content">
    <!--下面滚动的内容-->
  </div>
</div>

CSS部分：

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  /*顶部内容高度不固定，可以根据实际情况调整*/
}

.content {
  flex: 1;
  overflow-y: auto;
  padding-top: /*顶部内容高度*/;
  /*下面滚动的内容的高度不固定，flex: 1可以让它占据剩余空间*/
}

实现原理是使用flex布局，将容器高度固定为100vh，然后将顶部内容设置为position: fixed，使其固定在顶部。在下面滚动的内容中，使用flex: 1占据剩余空间，并设置padding-top为顶部内容的高度，确保下面滚动的内容不会被顶部内容遮挡。同时，使用overflow-y: auto让下面滚动的内容可以滚动。