Flexbox圣杯布局：固定头部、固定左侧导航、流动内容区域、固定右侧边栏。

Question

Flexbox圣杯布局：固定头部、固定左侧导航、流动内容区域、固定右侧边栏。

htmlcssflexbox

21

我正在尝试使用Flexbox构建“圣杯”布局。

固定标题
固定、可折叠、可滚动的左侧导航
灵活的内容区域
固定、可折叠、可滚动的右侧导航

见下图：

除了位于标题下方的“应用程序”区域的高度外，我已经把所有东西都做好了。现在它是100vh（视口高度的100%），但这包括64像素的标题。

我尝试使用calc（100vh - 64px），但这不适用于flex。

这是我的基本HTML结构：

<main>
    <header></header>
    <app>
        <nav>Left Nav</nav>
        <article>Content</article>
        <aside>Right Nav</aside>
    </app>
</main>

并且支持CSS：

main {
    display: flex;
    flex-direction: column;
}

header { 
    z-index: 0;
    flex: 0 0 64px;
    display: flex;
}

app {
    flex: 1 1 100vh;
    display: flex;
}

nav {
    flex: 0 0 256px;
    order: 0;
}

article {
    flex: 1 1 100px;
    order: 1;
}

aside {
    flex: 0 0 256px;
    order: 2;
}

- - - 完整的 jsFiddle 在此 - - -

- - - 简化的 jsFiddle 在此 - - -

- Jon

FYI，flex 标签用于 Apache Flex。flexbox 标签是指 CSS 弹性布局。 - Brian

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon · Accepted Answer

在 <main> 和 <body> 中存在一些 CSS 冲突，我所需要做的就是删除 <main> 包装器，然后将 flex 相关定义直接添加到页面主体中。

-- 这里是完整可工作的 jdFiddle -- -

-- 这里是简化后的 jdFiddle --

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

header {
  z-index: 0;
  flex: 0 64px;
  display: flex;
}

app {
  flex: 1;
  display: flex;
}

nav {
  flex: 0 0 256px;
  order: 0;
}

article {
  flex: 1;
  order: 1;
  overflow: auto;
}

aside {
  flex: 0 0 256px;
  order: 2;
}

<header></header>
<app>
  <nav>Left Nav</nav>
  <article></article>
  <aside>Right Nav</aside>
</app>