Flexbox圣杯布局:固定标题,固定左导航,流体内容区,固定右侧边栏 [英] Flexbox Holy Grail Layout: Fixed Header, Fixed Left Nav, Fluid Content Area, Fixed Right Sidebar
问题描述
我尝试使用Flexbox建立「圣杯」布局。
- 固定标题
- 固定,可折叠,可滚动左导航
- 灵活内容区
- 固定,可折叠,可滚动右导航
见下文:
- - - Simplified jsFiddle Here - - -
结果是有一些CSS冲突,< main> ; 和
< body>
,我所要做的就是删除< main>
wrapper,然后直接将flex定义添加到页面体。
新增HTML结构:
< body&
< header>< / header>
< app>
< 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;
}
随意使用这个作为您的应用程序的基础!享受!
I'm attempting to build the "Holy Grail" layout using Flexbox.
- Fixed Header
- Fixed, Collapsible, Scrollable Left Nav
- Flexible Content Area
- Fixed, Collapsible, Scrollable Right Nav
See below:
I have everything working, except for the height of the "app" area underneath the header. Right now it's 100vh (100% of the viewport height), but this includes the 64px header.
I attempted calc(100vh - 64px), but that doesn't jive well with flex.
Here's my basic HTML structure:
<main>
<header></header>
<app>
<nav>Left Nav</nav>
<article>Content</article>
<aside>Right Nav</aside>
</app>
</main>
And the supporting 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;
}
- - - Full jsFiddle Here - - -
- - - Simplified jsFiddle Here - - -
Figured it out!
Turns out there were some CSS conflicts with <main>
and <body>
, and all I had to do was remove the <main>
wrapper, then add the flex definitions directly to the page body.
- - - Here's the full working jdFiddle - - -
- - - Here's the simplified jdFiddle - - -
New HTML Structure:
<body>
<header></header>
<app>
<nav>Left Nav</nav>
<article></article>
<aside>Right Nav</aside>
</app>
</body>
New Supporting 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;
}
Feel free to use this as a basis for your applications! Enjoy!
这篇关于Flexbox圣杯布局:固定标题,固定左导航,流体内容区,固定右侧边栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!