Flexbox圣杯布局：固定标题，固定左导航，流体内容区，固定右侧边栏

本文介绍了Flexbox圣杯布局：固定标题，固定左导航，流体内容区，固定右侧边栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试使用Flexbox建立「圣杯」布局。

固定标题

固定，可折叠，可滚动左导航

灵活内容区

固定，可折叠，可滚动右导航

见下文：

结果是有一些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圣杯布局：固定标题，固定左导航，流体内容区，固定右侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！