CSS 具有多个可滚动区域的 Flexbox
CSS Flexbox with multiple scrollable regions
我正在尝试创建一个 flexbox，它有一个 header，然后是左窗格（可滚动）和右窗格（可滚动）。他们需要能够彼此分开滚动。最重要的是 parent 框架必须恰好占据宽度和高度的 100%。
下面是我想要实现的目标的图片
我也有一段我已经尝试过的片段。
http://codepen.io/anon/pen/KdJgBN?editors=110
我可以捏造它而不使用 flexbox，但当我离它这么近时不使用它似乎是一种浪费（单独的可滚动区域和粘性 header 目前不起作用）。
body {
font: caption;
margin: 0;
padding: 0;
overflow: hidden;
}
/**
* The main flex container
*/
div.flex-main-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
}
/**
* The fixed header
*/
div.flex-header {
background-color: #FF0000;
}
/**
* The container under header to hold the 2 rows
*/
div.flex-content {
background-color: #E0E0E0;
display: flex;
flex-direction: row;
}
/**
* Left flex container
*/
div.flex-files {
flex: 3;
overflow-y: auto;
background-color: #00DD00;
}
/**
* Right flex container
*/
div.flex-insert {
flex: 7;
background-color: #00FFDD;
}
<body>
<div class="flex-main-container">
<div class="flex-header">
Header content here<br/>
Header content here<br/>
Header content here<br/>
Header content here<br/>
</div>
<div class="flex-content">
<div class="flex-files">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lacus felis. Suspendisse euismod neque eu est consequat facilisis. Fusce efficitur est sem, nec posuere neque iaculis quis. Curabitur euismod massa sit amet mauris porttitor, vel vulputate ipsum vehicula. Nulla ut erat ut leo mollis mattis at sit amet urna. Nam condimentum a lectus in lacinia. Suspendisse at diam non felis lobortis placerat. Donec faucibus non arcu vel fringilla. Mauris nec porta dolor, at hendrerit justo. Phasellus ut est maximus nulla efficitur malesuada consequat eu felis. Etiam et ipsum in tellus vestibulum ornare feugiat in augue. Vestibulum luctus erat a nulla sollicitudin auctor. Integer erat leo, semper in tempor ac, elementum ac sapien.</p>
<p>Nunc dignissim tristique nisi eu consequat. Curabitur ornare ornare nunc a condimentum. Mauris tempus nisl sit amet nunc feugiat, sit amet ullamcorper tortor faucibus. Curabitur nisl leo, porta luctus leo sit amet, lobortis sodales lectus. Quisque fringilla at nunc quis sodales. Phasellus eget dapibus velit, nec aliquam sem. Nam a nisl ex. Morbi quis faucibus nisi. Curabitur fermentum porttitor orci eget venenatis. Phasellus ac dui eros. Maecenas sodales, justo non dignissim pharetra, libero sapien scelerisque magna, ultrices viverra sem libero nec nisl. Curabitur a nisi porttitor, eleifend mi imperdiet, vehicula quam. Donec porta nibh nec semper tempor.</p>
<p>Nam elementum sem non turpis dictum, ut placerat nunc posuere. Duis sed nisl at leo tempor hendrerit vitae et enim. Quisque vel urna sed quam convallis rhoncus vitae nec nibh. Ut a nibh id eros interdum consequat. Nulla efficitur at libero nec ultrices. Ut ut lectus sit amet arcu molestie viverra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis elit sodales ultricies sodales. Ut tempus auctor est in bibendum. Proin enim ipsum, venenatis vel blandit et, dictum in massa. Donec augue purus, egestas sed enim et, pretium gravida diam. Morbi tincidunt cursus augue id condimentum. Mauris congue libero turpis, quis laoreet augue gravida nec.</p>
<p>Nullam fermentum laoreet ipsum sit amet egestas. Maecenas non diam eget nisi faucibus sollicitudin. Sed semper ipsum sit amet arcu pulvinar, eget rhoncus nunc egestas. Proin aliquet faucibus purus, in aliquam urna posuere at. Duis fringilla at magna ac condimentum. Fusce eu nibh orci. Praesent dictum facilisis eros, non tincidunt sem ullamcorper in.</p>
<!-- <p>Vestibulum at volutpat nibh. Nam semper at tortor ut tempus. Nunc bibendum urna sit amet quam suscipit tempus. Curabitur facilisis sagittis efficitur. Etiam ultrices nulla vel leo dictum posuere. Ut sed erat sed velit vehicula porta. Proin sagittis pulvinar lacus et sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean congue lobortis erat nec malesuada.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lacus felis. Suspendisse euismod neque eu est consequat facilisis. Fusce efficitur est sem, nec posuere neque iaculis quis. Curabitur euismod massa sit amet mauris porttitor, vel vulputate ipsum vehicula. Nulla ut erat ut leo mollis mattis at sit amet urna. Nam condimentum a lectus in lacinia. Suspendisse at diam non felis lobortis placerat. Donec faucibus non arcu vel fringilla. Mauris nec porta dolor, at hendrerit justo. Phasellus ut est maximus nulla efficitur malesuada consequat eu felis. Etiam et ipsum in tellus vestibulum ornare feugiat in augue. Vestibulum luctus erat a nulla sollicitudin auctor. Integer erat leo, semper in tempor ac, elementum ac sapien.</p>
<p>Nunc dignissim tristique nisi eu consequat. Curabitur ornare ornare nunc a condimentum. Mauris tempus nisl sit amet nunc feugiat, sit amet ullamcorper tortor faucibus. Curabitur nisl leo, porta luctus leo sit amet, lobortis sodales lectus. Quisque fringilla at nunc quis sodales. Phasellus eget dapibus velit, nec aliquam sem. Nam a nisl ex. Morbi quis faucibus nisi. Curabitur fermentum porttitor orci eget venenatis. Phasellus ac dui eros. Maecenas sodales, justo non dignissim pharetra, libero sapien scelerisque magna, ultrices viverra sem libero nec nisl. Curabitur a nisi porttitor, eleifend mi imperdiet, vehicula quam. Donec porta nibh nec semper tempor.</p> -->
</div>
<div class="flex-insert">
Insert data
</div>
</div>
</div>
</body>
</html>
HTML
<body>
<div class="flex-header">
Header content here
<br/> Header content here
<br/> Header content here
<br/> Header content here
<br/>
</div>
<div class="flex-main-container">
<div class="flex-content">
<div class="flex-files">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="flex-insert">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
</div>
</div>
</body>
备注：
- 固定 header 已从弹性容器中移除。这使我们能够将 flex 容器定位在 header 下方 CSS.
- 由于
position: fixed的元素被从normal flow, and does not participate in flex layout中取出，所以没有理由存在于flex容器中，去除它有助于整体布局。
- header，如果保存在 flex 容器中，仍然可以参与 reordering（即使用 flex
order 属性） ，但作为固定元素，假设不太可能是re-positioned.
CSS
html {
height: 100%; /* full height of viewport */
}
body {
height: calc(100% - 80px); /* prevent vertical scrollbar on browser; see below */
font: caption;
margin: 0;
padding: 0;
}
div.flex-header {
position: fixed;
top: 0;
width: 100%;
height: 80px; /* height for header; adjustable; can be fixed or relative units */
background-color: #FF0000;
}
div.flex-main-container {
/* position: absolute; <-- Removed. Not necessary. */
margin-top: 80px; /* compensate for header height */
display: flex;
flex-direction: column;
height: 100%;
}
div.flex-content {
background-color: #E0E0E0;
display: flex;
flex-direction: row;
flex: 1;
min-height: 0; /* addresses FF vertical scroll bug */
min-width: 0; /* addresses FF vertical scroll bug */
}
div.flex-files {
flex: 3;
overflow-y: auto;
background-color: #00DD00;
}
div.flex-insert {
overflow-y: auto;
flex: 7;
background-color: #00FFDD;
}
备注：
您写道：
Most importantly the parent frame must take up exactly 100% of the width and height.
这可以用 html, body { height: 100%; } 来完成。你不需要 position: absolute.
固定的 header 被赋予了定义的高度，这使得 flex 容器能够使用 margin-top 缓冲区将自身定位在 header 下方。
如果您不想为 header 定义高度，请参阅此处：Placing a scrollable div below a fixed div of variable height
添加到 .flex-content 的 min-height: 0 和 min-width: 0 是解决 Firefox 中的垂直滚动错误所必需的。详情在这里：Vertical scroll rendering issue in Flexbox in Firefox
上面调整后的代码呈现了一个固定的 header，其中有两个可滚动区域：
已在 Chrome、Firefox 和 IE11 上测试。
我正在尝试创建一个 flexbox，它有一个 header，然后是左窗格（可滚动）和右窗格（可滚动）。他们需要能够彼此分开滚动。最重要的是 parent 框架必须恰好占据宽度和高度的 100%。
下面是我想要实现的目标的图片
我也有一段我已经尝试过的片段。
http://codepen.io/anon/pen/KdJgBN?editors=110
我可以捏造它而不使用 flexbox，但当我离它这么近时不使用它似乎是一种浪费（单独的可滚动区域和粘性 header 目前不起作用）。
body {
font: caption;
margin: 0;
padding: 0;
overflow: hidden;
}
/**
* The main flex container
*/
div.flex-main-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
}
/**
* The fixed header
*/
div.flex-header {
background-color: #FF0000;
}
/**
* The container under header to hold the 2 rows
*/
div.flex-content {
background-color: #E0E0E0;
display: flex;
flex-direction: row;
}
/**
* Left flex container
*/
div.flex-files {
flex: 3;
overflow-y: auto;
background-color: #00DD00;
}
/**
* Right flex container
*/
div.flex-insert {
flex: 7;
background-color: #00FFDD;
}
<body>
<div class="flex-main-container">
<div class="flex-header">
Header content here<br/>
Header content here<br/>
Header content here<br/>
Header content here<br/>
</div>
<div class="flex-content">
<div class="flex-files">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lacus felis. Suspendisse euismod neque eu est consequat facilisis. Fusce efficitur est sem, nec posuere neque iaculis quis. Curabitur euismod massa sit amet mauris porttitor, vel vulputate ipsum vehicula. Nulla ut erat ut leo mollis mattis at sit amet urna. Nam condimentum a lectus in lacinia. Suspendisse at diam non felis lobortis placerat. Donec faucibus non arcu vel fringilla. Mauris nec porta dolor, at hendrerit justo. Phasellus ut est maximus nulla efficitur malesuada consequat eu felis. Etiam et ipsum in tellus vestibulum ornare feugiat in augue. Vestibulum luctus erat a nulla sollicitudin auctor. Integer erat leo, semper in tempor ac, elementum ac sapien.</p>
<p>Nunc dignissim tristique nisi eu consequat. Curabitur ornare ornare nunc a condimentum. Mauris tempus nisl sit amet nunc feugiat, sit amet ullamcorper tortor faucibus. Curabitur nisl leo, porta luctus leo sit amet, lobortis sodales lectus. Quisque fringilla at nunc quis sodales. Phasellus eget dapibus velit, nec aliquam sem. Nam a nisl ex. Morbi quis faucibus nisi. Curabitur fermentum porttitor orci eget venenatis. Phasellus ac dui eros. Maecenas sodales, justo non dignissim pharetra, libero sapien scelerisque magna, ultrices viverra sem libero nec nisl. Curabitur a nisi porttitor, eleifend mi imperdiet, vehicula quam. Donec porta nibh nec semper tempor.</p>
<p>Nam elementum sem non turpis dictum, ut placerat nunc posuere. Duis sed nisl at leo tempor hendrerit vitae et enim. Quisque vel urna sed quam convallis rhoncus vitae nec nibh. Ut a nibh id eros interdum consequat. Nulla efficitur at libero nec ultrices. Ut ut lectus sit amet arcu molestie viverra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis elit sodales ultricies sodales. Ut tempus auctor est in bibendum. Proin enim ipsum, venenatis vel blandit et, dictum in massa. Donec augue purus, egestas sed enim et, pretium gravida diam. Morbi tincidunt cursus augue id condimentum. Mauris congue libero turpis, quis laoreet augue gravida nec.</p>
<p>Nullam fermentum laoreet ipsum sit amet egestas. Maecenas non diam eget nisi faucibus sollicitudin. Sed semper ipsum sit amet arcu pulvinar, eget rhoncus nunc egestas. Proin aliquet faucibus purus, in aliquam urna posuere at. Duis fringilla at magna ac condimentum. Fusce eu nibh orci. Praesent dictum facilisis eros, non tincidunt sem ullamcorper in.</p>
<!-- <p>Vestibulum at volutpat nibh. Nam semper at tortor ut tempus. Nunc bibendum urna sit amet quam suscipit tempus. Curabitur facilisis sagittis efficitur. Etiam ultrices nulla vel leo dictum posuere. Ut sed erat sed velit vehicula porta. Proin sagittis pulvinar lacus et sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean congue lobortis erat nec malesuada.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lacus felis. Suspendisse euismod neque eu est consequat facilisis. Fusce efficitur est sem, nec posuere neque iaculis quis. Curabitur euismod massa sit amet mauris porttitor, vel vulputate ipsum vehicula. Nulla ut erat ut leo mollis mattis at sit amet urna. Nam condimentum a lectus in lacinia. Suspendisse at diam non felis lobortis placerat. Donec faucibus non arcu vel fringilla. Mauris nec porta dolor, at hendrerit justo. Phasellus ut est maximus nulla efficitur malesuada consequat eu felis. Etiam et ipsum in tellus vestibulum ornare feugiat in augue. Vestibulum luctus erat a nulla sollicitudin auctor. Integer erat leo, semper in tempor ac, elementum ac sapien.</p>
<p>Nunc dignissim tristique nisi eu consequat. Curabitur ornare ornare nunc a condimentum. Mauris tempus nisl sit amet nunc feugiat, sit amet ullamcorper tortor faucibus. Curabitur nisl leo, porta luctus leo sit amet, lobortis sodales lectus. Quisque fringilla at nunc quis sodales. Phasellus eget dapibus velit, nec aliquam sem. Nam a nisl ex. Morbi quis faucibus nisi. Curabitur fermentum porttitor orci eget venenatis. Phasellus ac dui eros. Maecenas sodales, justo non dignissim pharetra, libero sapien scelerisque magna, ultrices viverra sem libero nec nisl. Curabitur a nisi porttitor, eleifend mi imperdiet, vehicula quam. Donec porta nibh nec semper tempor.</p> -->
</div>
<div class="flex-insert">
Insert data
</div>
</div>
</div>
</body>
</html>
HTML
<body>
<div class="flex-header">
Header content here
<br/> Header content here
<br/> Header content here
<br/> Header content here
<br/>
</div>
<div class="flex-main-container">
<div class="flex-content">
<div class="flex-files">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="flex-insert">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
</div>
</div>
</body>
备注：
- 固定 header 已从弹性容器中移除。这使我们能够将 flex 容器定位在 header 下方 CSS.
- 由于
position: fixed的元素被从normal flow, and does not participate in flex layout中取出，所以没有理由存在于flex容器中，去除它有助于整体布局。 - header，如果保存在 flex 容器中，仍然可以参与 reordering（即使用 flex
order属性） ，但作为固定元素，假设不太可能是re-positioned.
CSS
html {
height: 100%; /* full height of viewport */
}
body {
height: calc(100% - 80px); /* prevent vertical scrollbar on browser; see below */
font: caption;
margin: 0;
padding: 0;
}
div.flex-header {
position: fixed;
top: 0;
width: 100%;
height: 80px; /* height for header; adjustable; can be fixed or relative units */
background-color: #FF0000;
}
div.flex-main-container {
/* position: absolute; <-- Removed. Not necessary. */
margin-top: 80px; /* compensate for header height */
display: flex;
flex-direction: column;
height: 100%;
}
div.flex-content {
background-color: #E0E0E0;
display: flex;
flex-direction: row;
flex: 1;
min-height: 0; /* addresses FF vertical scroll bug */
min-width: 0; /* addresses FF vertical scroll bug */
}
div.flex-files {
flex: 3;
overflow-y: auto;
background-color: #00DD00;
}
div.flex-insert {
overflow-y: auto;
flex: 7;
background-color: #00FFDD;
}
备注：
您写道：
Most importantly the parent frame must take up exactly 100% of the width and height.
这可以用
html, body { height: 100%; }来完成。你不需要position: absolute.固定的 header 被赋予了定义的高度，这使得 flex 容器能够使用
margin-top缓冲区将自身定位在 header 下方。如果您不想为 header 定义高度，请参阅此处：Placing a scrollable div below a fixed div of variable height
添加到
.flex-content的min-height: 0和min-width: 0是解决 Firefox 中的垂直滚动错误所必需的。详情在这里：Vertical scroll rendering issue in Flexbox in Firefox
上面调整后的代码呈现了一个固定的 header，其中有两个可滚动区域：
已在 Chrome、Firefox 和 IE11 上测试。