具有主要内容的样式侧边栏+使用flexbox的粘页眉/页脚

Question

我有一个侧边栏和主要内容，以及一个用SUIR构建的导航栏。我想确保主要内容始终可见，并且在显示侧边栏时不会被遮挡。

这是我的仪表板组件，用于渲染侧栏/内容组件

const Dashboard = props => {
  return (
    <div
      style={{ height: "100vh", display: "flex", flexFlow: "column nowrap" }}
    >
      <div>
        <PageHeader />
      </div>
      <div style={{ flex: 1 }}>
        <SidebarExample>
          <DashboardContent />
        </SidebarExample>
      </div>
    </div>
  );
};

我也有一个codesandbox here with the example

Answer 1

问题是伸缩行元素和两个内部元素（边栏和内容）之间存在一个元素：

<div style="flex: 1 1 0%;">
  <div class="ui segment pushable"> <!-- this element needs flex -->
    <div class="ui inverted vertical ..."> ... </div>
    <div class="pusher"> ... </div>
  </div>
</div>

进行一些重组以解决此问题，并且效果很好。

Answer 2

我认为您可以通过使用position:absolute;和z-index在主要内容上显示菜单来解决此问题。

否则，您可以尝试这样的CSS方法：

-----------------------------
|    |                      |
|    |                      |
|    |                      |
|    |                      |
|    |                      |
 menu      content
 10%        90%

然后像这样应用它：

.menu:focus-visible .content {
   width: 90vw;
}

.menu:not(:focus-visible) .content {
   width: 100vw;
}