我试图使用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;
}
随意使用它作为您的应用程序的基础！请享用！
原文地址：https://www.jb51.cc/html/224190.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
