我使用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>
&#13;
但请注意,侧边栏不单独滚动。而是整个视口扩展和滚动。有趣的是,我试图实现的功能在没有嵌套的情况下正常工作 - 如果我删除导航栏,侧边栏会独立滚动。
如何阻止flexbox本身拉伸以包含其内容,以便显示特定于元素的滚动条,而不是视口的滚动条?
答案 0 :(得分:13)
添加:
#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 FF 33.x Flexbox behavior in FF 34.x?中所述,Flexbox模块会更改min-height
的初始值:
4.5 Implied Minimum Size of Flex Items
为flex items提供更合理的默认最小尺寸, 本规范引入了一个新的auto值作为初始值 中定义的min-width和min-height属性的值 CSS 2.1。
我还添加了flex: 1 1 0
,因为flex: 1
变为flex: 1 1 0%
,但0%
在列布局中Chrome上存在错误。但0
效果很好。