html – Flexbox圣杯布局：固定标题,固定左导航,流体内容区域,固

发布时间：2020-12-14 19:34:16 所属栏目：资源来源：网络整理

导读：我试图使用Flexbox构建“圣杯”布局. 固定头固定,可折叠,可滚动左导航灵活内容区固定,可滚动右导航见下文：我有一切工作,除了标题下面的“应用程序”区域的高度.现在它是100vh(100％的视口高度),但这包括64px标题. 我尝试了calc(100vh – 64px),但是这

我试图使用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;
}

– – – Full jsFiddle Here – – –

– – – Simplified jsFiddle Here – – –

解决方法

弄清楚了！

事实证明,与< 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;
}

随意使用它作为您的应用程序的基础！请享用！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!