时间戳

首页 > 解决方案 > 使用 flexbox 设计带有主要内容 + 粘性页眉/页脚的侧边栏

css - 使用 flexbox 设计带有主要内容 + 粘性页眉/页脚的侧边栏

问题描述

我有一个侧边栏和主要内容以及一个用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>
  );
};

我这里还有一个带有示例的代码框

标签： cssreactjsflexbox

解决方案

问题是在您的 flex 行元素和两个内部元素（侧边栏和内容）之间有一个元素。这是我在浏览器中看到的：

<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>

稍微重组一下来解决这个问题，它工作正常。

推荐阅读