Semantic-UI布局求助：无需额外CSS，让Pusher内容不被fixed top menu遮挡？

嘿，我来帮你解决这个布局问题啦！

问题的核心是那个fixed顶部菜单脱离了正常的文档流，导致pusher里的grid内容直接从页面最顶部开始渲染，自然就被菜单挡住了。不用写额外CSS的话，咱们直接用Semantic-UI内置的类就能搞定。

具体怎么改？ #

你只需要在pusher里的grid外面，套一个带top padded类的容器（或者直接给grid本身加这个类），这个类会自动给内容加上顶部内边距，刚好避开fixed菜单的空间。

完整的示例代码 #

<div class="ui top fixed menu">
  <div class="item">Fixed Top Menu</div>
  <div class="right menu">
    <div class="item">
      <button class="ui button" id="toggleSidebar">Toggle Sidebar</button>
    </div>
  </div>
</div>

<div class="ui pushable">
  <!-- 侧边栏部分保持不变 -->
  <div class="ui sidebar inverted vertical menu">
    <div class="item">Sidebar Item 1</div>
    <div class="item">Sidebar Item 2</div>
    <div class="item">Sidebar Item 3</div>
  </div>

  <!-- Pusher部分修改这里 -->
  <div class="ui pusher">
    <!-- 关键：用top padded类给内容预留顶部空间 -->
    <div class="ui top padded container">
      <div class="ui grid">
        <div class="column">
          <h1>Hello World</h1>
          <p>这下内容不会被fixed菜单挡住啦！</p>
          <p>随便写点测试内容凑数~ Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $('#toggleSidebar').click(() => {
    $('.ui.sidebar').sidebar('toggle');
  });
</script>

更简化的写法 #

要是你觉得额外加container麻烦，直接给grid加top padded类也行：

<div class="ui pusher">
  <div class="ui top padded grid">
    <div class="column">
      <!-- 你的内容写在这里 -->
    </div>
  </div>
</div>

这样完全不用自定义CSS，纯Semantic-UI标记就解决了遮挡问题😉

内容的提问来源于stack exchange，提问作者mpugach