大佬教程收集整理的这篇文章主要介绍了html – 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：
@H_934_17@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; }
随意使用它作为您的应用程序的基础！请享用！
以上是大佬教程为你收集整理的html – Flexbox圣杯布局：固定标题,固定左导航,流体内容区域,固定右侧栏全部内容，希望文章能够帮你解决html – Flexbox圣杯布局：固定标题,固定左导航,流体内容区域,固定右侧栏所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。