我试图使用FlexBox构建“圣杯”布局.
>固定头
>固定,可折叠,可滚动左导航
>灵活内容区
>固定,可滚动右导航
见下文:
我有一切工作,除了标题下面的“应用程序”区域的高度.现在它是100vh(100%的视口高度),但这包括64px标题.
我尝试了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; }
解决方法
弄清楚了!
事实证明,与< main>有一些CSS冲突.和< body>,我所要做的就是删除< main>包装器,然后将flex定义直接添加到页面主体.
– – – Here’s the full working jdFiddle – – –
– – – Here’s the simplified jdFiddle – – –
新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; }
随意使用它作为您的应用程序的基础!请享用!