Html 在固定flexbox导航菜单下定位可滚动内容

我有以下代码片段（需要在全屏模式下查看），我正试图将

元素直接放在

元素下面。我将

放在固定位置，因为我希望当用户滚动

元素中的内容时，它保持在屏幕顶部。我已经尝试了我所知道的一切，但我能想到的最好的办法是将

元素放在

元素的顶部，这会切断一大块内容

我提出的最接近可能的解决方案是在

元素上添加一个猜测的顶部填充，这样它将清除

。然而，这个解决方案并不能很好地解释各种屏幕大小，因为我使用的是rem大小而不是px大小。在使用相对高度或基于百分比的高度的

中放置多个元素时，顶部填充的想法变得更糟。在一个屏幕大小上，所有内容都可以完美排列，而在另一个屏幕大小上，内容可能相差很远

最后，我知道我可以使用jQuery动态设置顶部填充，但它似乎并不总是工作得那么好。想知道有没有一个纯css/html解决方案

有人能告诉我我错过了什么吗？我的顶部填充方法是唯一可行的解决方案吗

$（文档）.ready（函数（）{
$（'#navToggle'）。单击（函数（）{
$（“div#bottom container>nav”）.slideToggle（）；
});
$（窗口）。调整大小（函数（）{
如果（window.innerWidth>=“751”）{
$（“标题>分区#底部容器>导航”）.show（）；
}否则{
$（“标题>div#底部容器>导航”）.hide（）；
}
});
$（“标题>div#底部容器>导航>ul>li>a”）。单击（函数（e）{
如果（window.innerWidth 0）{
e、 预防默认值（）；
$（this.this（）.slideToggle（“slow”）；
}
}
});
$（“标题>div#底部容器>导航>ul>li”）。悬停（函数（）{
如果（window.innerWidth>=“751”）{
if（$（this）.children（“nav”）.size（）>0）{
$（this.children（“nav”）.stop（）.show（）；
}
}
}，函数（）{
如果（window.innerWidth>=“751”）{
if（$（this）.children（“nav”）.size（）>0）{
$（this.children（“nav”）.hide（）；
}
}
});
});
*{
保证金：0；
}
@介质（最小宽度：48rem）{
：根{
字体大小：calc（1rem+（（1vw-.48rem）*1.389））；
}
}
身体{
背景：#eee；
字体系列：“HelveticaNeue灯”，Arial；
高度：自动！重要；
}
#头巾{
保证金：0自动；
位置：相对位置；
宽度：100%；
}
#第二次包装{
位置：固定；
宽度：100%；
z指数：999；
}
主要{
高度：4000px；
位置：相对位置；
垫面：13rem；
}
标题{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
溢出x：隐藏；
溢出y：自动；
高度：200雷姆；
}
#导航开关{
背景色：rgba（0,0,0,15）；
位置：相对位置；
右：0；
排名：0；
z指数：999；
身高：2.6雷姆；
}
#导航切换>a{
颜色：rgba（255、255、255、85）；
显示：块；
字号：0.85em；
字号：600；
填充：0.2.5雷姆；
文字装饰：无；
过渡：所有300毫秒缓解；
填料顶部：9雷姆；
}
#底部容器{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
盒影：2px 5px 10px 1px rgba（0,0,0,0.55）；
}
#底部容器>导航{
背景色：rgb（25020914）；
显示：无；
弹性：1；
}
#底部集装箱导航>ul{
列表样式类型：无；
}
#底部集装箱导航>ul>li{
位置：相对位置；
}
#底部集装箱导航>ul>li>a{
显示：块；
颜色：rgba（0,0,0,65）；
填充：1.3rem 0；
文字装饰：无；
}
#底部容器导航>ul>li>跨度切换{
背景色：rgba（0,0,0,05）；
颜色：rgba（0,0,0,25）；
填充：2px8px；
}
#底部容器>导航>ul>li>导航{
显示：无；
溢出：隐藏；
位置：绝对位置；
最高：100%；
右：5%；
宽度：90%；
z指数：100；
背景色：rgb（250250250）；
边缘底部：10雷姆；
}
标题>导航>ul>li>nav>ul>li>a{
颜色：rgba（255、255、255、85）；
}
/*
/////////////////////////////////////////////////
/////////////////////////////////////////////////
////这是我所知道的唯一解决办法//////////
*/
主要{
垫面：5rem；
}
/*
////////////////////////////////////////////////
////////////////////////////////////////////////
*/
/*中等屏幕*/
@介质和全部（最小宽度：751px）{
标题{
溢出y：可见；
溢出x：可见；
填充底部：0；
}
#导航开关{
显示：无；
}
#底部容器{
背景色：rgb（25020914）；
宽度：100%；
边框顶部：calc（5vh+2vw）纯黄色；
}
#底部容器>导航{
显示：块；
}
#底部容器>导航>ul{
显示器：flex；
证明内容：中心；
弯曲方向：行；
高度：3雷姆；
}
#底部集装箱导航>ul>li{
位置：静态；
弹性：1；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#底部集装箱导航>ul>li>a{
填充：0；
}
#底部容器导航>ul>li>跨度切换{
显示：无；
}
#底部容器>导航>ul>li>nav>ul>li{
线高：2.5雷姆；
}
#底部容器>导航>ul>li>导航{
最高保证金：-194.5雷姆；
}
}












内容顶部不可见，但应能看到

第1行

第2行

第3行

第4行

第5行

第6行

第7行

第8行

第9行

第10行

第11行

第12行

第13行

第14行

第15行
#bottom-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
  position: sticky;
  top: 0;
  z-index: 1; 
}

<header>
    <nav id="mobileMenu"><a href="#">Menu</a></nav>
    <nav id='menu'>
      <div class="menuItem">
        <a href="#">ITEM ONE</a>
      </div>
      <div class="bigMenuItem">
        HOVER ME
        <div class="menuItemsCon">
          <div class="menuItem"><a href="#">Sub Item 1</a></div>
          <div class="menuItem"><a href="#">Sub Item 2</a></div>
          <div class="menuItem"><a href="#">Sub Item 3</a></div>
          <div class="menuItem"><a href="#">Sub Item 4</a></div>
        </div>
      </div>
      <label class="bigMenuItem" for="inputClick">
        CLICK ME
        <input type="checkbox" name="input" id="inputClick" style="display:none;">
        <div class="menuItemsCon click">
          <div class="menuItem"><a href="#">Sub Item 1</a></div>
          <div class="menuItem"><a href="#">Sub Item 2</a></div>
          <div class="menuItem"><a href="#">Sub Item 3</a></div>
          <div class="menuItem"><a href="#">Sub Item 4</a></div>
        </div>
      </label>
    </nav>
  </header>

  <main>
    <p>content top not visible but should be able to see</P>
    <p>line 1</P>
    <p>line 2</P>
    <p>line 3</P>
    <p>line 4</P>
    <p>line 5</P>
    <p>line 6</P>
    <p>line 7</P>
    <p>line 8</P>
    <p>line 9</P>
    <p>line 10</P>
  </main>

* {
  margin: 0;
}

@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
  }
}

body {
  background: #eee;
  font-family: "HelveticaNeue-Light", Arial;
  height: auto !important;
}
main{
  height:100vh;
  position:relative;
}

/*Changed classes*/

header{
  position: sticky;
  top:0;
  z-index: 1;
}

a{
  display: block;
  color: rgba(0, 0, 0, .65);
  text-decoration: none;
  width: 100%;
  height: 100%;
}

#mobileMenu{
  display: none;
  background-color: rgba(0, 0, 0, .15);
  height: 2.6rem
}

#mobileMenu a{
  color:rgba(255, 255, 255, .85);
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0 2.5rem;
  text-decoration: none;
  transition: all 300ms ease;
  padding-top: .9rem;
}

#menu{
  background-color: rgb(250, 209, 14);
  border-top: calc(5vh + 2vw) solid yellow;
  display: flex;
  z-index: 999;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.55);
}

@media only screen and (max-width:751px) {
  #mobileMenu{
    display: block;
  }
  #menu{
    display: none;
  }
}

#menu > .menuItem, #menu > .bigMenuItem{
  width: calc(100%/3);
  height: 3rem;
  text-align: center;
  line-height: 3rem;
}

#menu > .bigMenuItem{
  position: relative;
  cursor: pointer;
}

#menu > .bigMenuItem .menuItemsCon{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: -1;
  opacity: 0;
  position: relative;
  top: -100vh;
  transition: all .5s;
}


#menu > .bigMenuItem .menuItemsCon > .menuItem{
  height: 3rem;
  background-color: #FFF;
}

/* and if you want to click for submenu to show*/
#menu  .bigMenuItem input:checked + .menuItemsCon, #menu  .bigMenuItem:hover .menuItemsCon:not(.click){
  opacity: 1;
  top: 0;
}

window.addEventListener("load", function(e){
  my_main.style.paddingTop = my_header.clientHeight + "px";
}, 1);

<header id="my_header"> <main id="my_main">