我正在使用flexBox构建布局,整体而言相当简单.视图有三个部分：顶部的导航栏,左侧的侧边栏和填充剩余空间的内容区域.导航栏具有固定高度,侧栏具有固定宽度.
此外,侧边栏和内容区域应单独滚动.如果侧边栏中的内容溢出,则应创建特定于侧边栏的滚动条.内容视图也是如此.重要的是,这意味着整个视口必须永远不会滚动：它应该保持静态(只有元素应该滚动).
使用flexBox构建此布局非常简单：
html,body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
#root {
display: flex;
height: 100%;
}
#frame {
display: flex;
flex: 1;
flex-direction: column;
}
#navigation-bar {
background-color: #bab;
display: flex;
height: 70px;
overflow: hidden;
}
#main {
display: flex;
flex: 1;
}
#left-bar {
background-color: #aaa;
overflow: auto;
width: 250px;
}
#content {
background-color: #ccc;
flex: 1;
}
<div id="root">
<div id="frame">
<div id="navigation-bar">
<h1>Website Name</h1>
</div>
<div id="main">
<div id="left-bar">
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
</div>
<div id="content">
</div>
</div>
</div>
</div>
但是,请注意侧边栏不会单独滚动.而是整个视口扩展和滚动.有趣的是,我想要实现的是没有嵌套的正常工作 – 如果我删除导航栏,侧边栏会独立滚动.
解决方法
添加这个：
#main {
min-height: 0;
flex: 1 1 0;
}
html,body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
#root {
display: flex;
height: 100%;
}
#frame {
display: flex;
flex: 1;
flex-direction: column;
}
#navigation-bar {
background-color: #bab;
display: flex;
height: 70px;
overflow: hidden;
}
#main {
display: flex;
flex: 1 1 0;
min-height: 0;
}
#left-bar {
background-color: #aaa;
overflow: auto;
width: 250px;
}
#content {
background-color: #ccc;
flex: 1;
}
<div id="root">
<div id="frame">
<div id="navigation-bar">
<h1>Website Name</h1>
</div>
<div id="main">
<div id="left-bar">
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
<h1>Some content</h1>
</div>
<div id="content"></div>
</div>
</div>
</div>
您需要min-height：0,因为如How can I get FF33.x Flexbox behavior in FF34.x?中所述,FlexBox模块会更改min-height的初始值：
07001
To provide a more reasonable default minimum size for 07002,
this specification introduces a new 07003 value as the initial
value of the 07004 and 07005 properties defined in
CSS 2.1.
我还添加了flex：1 1 0因为flex：1变为flex：1 1 0％,但0％在列布局中Chrome上有问题.但是0效果很好.
