如何防止垂直菜单项在语义 UI 中位于顶部固定菜单后面？

Question

我想在我的网站上同时设置顶部固定菜单和左侧垂直菜单。我真的希望两者都得到修复，但如果我开始滚动，那么左侧垂直菜单将在顶部菜单下方向上滑动，如下面的代码和 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/

我希望我正在尝试做的事情有意义。有谁知道我怎样才能同时拥有这两个固定菜单而不让我的项目重叠？

Answer 1

快速 CSS 条目？

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

Answer 2

在您的垂直菜单上方创建一个空白区域，这意味着使用与您的固定元素高度相同的不可见元素来扩大您的菜单

#side-menu {
  height: 100%;
}
.fake_area {
  position:relative;
  display:block;
  width:100%;
  height:40px;
}

.
.
.
  <div class="header item">
    Top Menu Header
  </div>
</div>
<div class="fake_area"></div>
<div class="ui grid">
  <div class="four wide column">
.
.
.

check it

Answer 3

感谢您的回答。我最终使用 jQuery 使我的解决方案更加动态，因为我的顶部固定菜单的高度可能会有所不同。我使用以下代码更改了正文的顶部填充以匹配顶部菜单的高度：

$('body')
    .css('padding-top', $('#top-menu').height());

在正文顶部添加内边距会下推包含我的侧边菜单的 ui 网格。

如何防止垂直菜单项在语义 UI 中位于顶部固定菜单后面？

How to keep vertical menu items from going behind top fixed menu in Semantic UI?

html

css

semantic-ui

semantic-ui-css