我用Here's the code来实现上述布局:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}<div class="header">Main header</div>
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="column">Column 1</div>
<div class="column">Column 1</div>
<div class="column">Column 1</div>
</div>
</div>
</div>我省略了用于样式设置的代码.你可以在the pen分钟内看到所有的东西.
上面的方法是有效的，但是当content区域的内容溢出时，它会使整个页面滚动.我只想让内容区本身滚动，所以是I added overflow: auto to the content div.
现在的问题是，柱子本身并没有延伸到它们父母的高度，所以边界也被切断了.
Here's the pen showing the scrolling issue美元.
How can I set the 100 area to scroll independently, while still having its children extend beyond the 100 box's height?