如何防止垂直菜单项落后于语义 UI 中的顶部固定菜单？答案

【问题标题】：How to keep vertical menu items from going behind top fixed menu in Semantic UI?如何防止垂直菜单项落后于语义 UI 中的顶部固定菜单？
【发布时间】：2016-11-05 22:45:29
【问题描述】：

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

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

【问题讨论】：

标签： html css semantic-ui semantic-ui-css

【解决方案1】：

快速的 CSS 条目？

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

【讨论】：

【解决方案2】：

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

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

在主体顶部添加填充会向下推包含我的侧边菜单的 ui 网格。

【讨论】：

【解决方案3】：

在垂直菜单上方留出一个空白区域，意味着使用与固定元素高度相同的不可见元素放大菜单

#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

【讨论】：