html - 如何使垂直菜单项不位于语义UI的顶部固定菜单后面？

我试图在我的网站上既有一个顶部固定菜单，也有一个左垂直菜单。我真的希望两者都能被修复，但是如果我开始滚动，那么左垂直菜单将在顶部菜单下向上滑动，如下面的代码和jsfiddle所示：

<div class="ui inverted top fixed menu">
  <div class="header item">
    Top Menu Header
  </div>
</div>
<div class="ui grid">
  <div class="four wide column">
    <div class="ui inverted left vertical fluid menu" id="side-menu">
      <div class="item">
        Item #1
      </div>
      <div class="item">
        Item #2
      </div>
    </div>
  </div>
  <div class="twelve wide column">
  <!-- Main content here -->
    <div class="row">
      Text here
    </div>
    <div class="row">
      Text here
    </div>
  </div>
</div>

https://jsfiddle.net/318ruL3j/2/
如果我使用固定的垂直菜单，那么第一个项将隐藏在顶部菜单的下面，如下面的代码和jsfiddle所示：

<div class="ui inverted left vertical fixed menu" id="side-menu">
  <div class="item">
    Item #1
  </div>
  <div class="item">
    Item #2
  </div>
</div>
<div class="ui inverted top fixed menu">
  <div class="header item">
    Top Menu Header
  </div>
</div>
<div class="ui grid">
  <!-- Main content here -->
  <div class="column">
    <div class="row">
      Text here
    </div>
    <div class="row">
      Text here
    </div>
  </div>
</div>

https://jsfiddle.net/z5vozbts/2/
我希望我的努力是有意义的。有没有人知道我怎样才能既有这些固定的菜单，又不让我的项目重叠？

最佳答案

一个快速的CSS条目？

#side-menu {
  height: 100vh;
  padding-top:2.0em;
}