Flexbox Holy Grail布局:固定标题,固定左导航,流体内容区域,固定右侧边栏
Jon*_*Jon 20 html css css3 flexbox
我正在尝试使用Flexbox构建"Holy Grail"布局.
- 固定标题
- 固定,可折叠,可滚动左导航
- 灵活的内容区域
- 固定,可折叠,可滚动的右导航
见下文:
除了标题下方"app"区域的高度外,我一切正常.现在它是100vh(视口高度的100%),但这包括64px标题.
我尝试计算(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;
}
Jon*_*Jon 19
弄清楚了!
结果发现有一些CSS冲突<main>和<body>,而我所要做的就是删除<main>包装器,然后将flex定义直接添加到页面主体.
新的HTML结构:
<body>
<header></header>
<app>
<nav>Left Nav</nav>
<article></article>
<aside>Right Nav</aside>
</app>
</body>
新的支持CSS:
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;
}
随意使用它作为您的应用程序的基础!请享用!
- 这个答案虽然在当前的Chrome(47)和Safari(9)中运行良好,但在Firefox(44)中似乎无法正常运行.这似乎是一个反复出现的问题,我看到这样的布局在FF上的flexbox编码 - 它似乎不尊重单个面板(在您的示例中的导航和/或文章面板)具有flex计算的能力高度和溢出设置.相反,整个页面滚动.我似乎无法让它在FF中正常工作 - 可能有些前缀丢失了？ (2认同)
- @J.KyMarsh只需将`overflow:auto;`添加到`app`选择器,固定标题也可以在FF中使用. (2认同)