Flexbox全高和宽度与侧面板
我开始阅读Flexbox，并使用NEWER flexbox api在全高应用中垂直滚动。 以下工作非常好：
html,body{
overflow: hidden;
width: 100%; height: 100%;
max-height: 100%; max-width: 100%;
margin: 0; padding: 0;
}
.site-container {
height: 100%; width: 100%;
display: flex;
flex-direction: column;
}
.site-container .site-header,
.site-container .site-footer{
flex: 0 0 auto;
overflow: visible;
}
.site-container .site-body {
position: relative;
overflow: auto;
min-height: 0px;
flex: 0 1 auto;
}<div class="site-container">
<div class="site-header">
<div style="height: 40px;background-color:YellowGreen">My Header Test </div>
</div>
<div class="site-body">
blah1<br />
blah2<br />
blah3<br />
blah4<br />
blah5<br />
blah6<br />
blah7<br />
blah8<br />
blah9<br />
blah10<br />
blah11<br />
blah12<br />
blah13<br />
blah14<br />
blah15<br />
blah16<br />
blah17<br />
blah18<br />
blah19<br />
blah20<br />
blah21<br />
blah22<br />
blah23<br />
blah24<br />
blah25<br />
blah26<br />
blah27<br />
blah28<br />
blah29<br />
blah30<br />
blah31<br />
blah32<br />
blah33<br />
blah34<br />
blah35<br />
blah36<br />
blah37<br />
blah38<br />
blah39<br />
blah40<br />
blah41<br />
blah42<br />
blah43<br />
blah44<br />
blah45<br />
blah46<br />
blah47<br />
blah48<br />
blah49<br />
blah50<br />
blah51<br />
blah52<br />
blah53<br />
blah54<br />
blah55<br />
blah56<br />
blah57<br />
blah58<br />
blah59<br />
blah60<br />
blah61<br />
blah62<br />
blah63<br />
blah64<br />
blah65<br />
blah66<br />
blah67<br />
blah68<br />
blah69<br />
</div>
<div class="site-footer">
<div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
</div>
</div> 与site-header不同， site-header是site-container的flex项目， site-footer嵌套在site-body 。 要么是故意的，要么是你错过了一个关闭的div 。 为了这个答案的目的，我假定了后者。
现在， site-header ， site-body和site-footer是兄弟姐妹。
然后我添加了overflow: auto和flex: 1到.site-content 。 第一个启用滚动条，第二个使用行上的可用空间。
.site-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.site-body {
min-height: 0px;
height: 100%;
}
.body-container {
display: flex;
height: 100%;
}
.site-content {
flex: 1;
overflow: auto;
}
body {
margin: 0;
}<div class="site-container">
<div class="site-header">
<div style="height: 40px;background-color:YellowGreen">My Header Test </div>
</div>
<div class="site-body">
<div class="body-container">
<div class="site-sidebar-left">
<div style="background-color:lightgray;">
left1
<br /> left2
<br /> left3
<br /> left4
<br /> left5
<br /> left6
<br /> left7
<br /> left8
<br /> left9
<br /> left10
<br />
</div>
</div>
<div class="site-content">
blah1
<br /> blah2
<br /> blah3
<br /> blah4
<br /> blah5
<br /> blah6
<br /> blah7
<br /> blah8
<br /> blah9
<br /> blah10
<br /> blah11
<br /> blah12
<br /> blah13
<br /> blah14
<br /> blah15
<br /> blah16
<br /> blah17
<br /> blah18
<br /> blah19
<br /> blah20
<br /> blah21
<br /> blah22
<br /> blah23
<br /> blah24
<br /> blah25
<br /> blah26
<br /> blah27
<br /> blah28
<br /> blah29
<br /> blah30
<br /> blah31
<br /> blah32
<br /> blah33
<br /> blah34
<br /> blah35
<br /> blah36
<br /> blah37
<br /> blah38
<br /> blah39
<br /> blah40
<br /> blah41
<br /> blah42
<br /> blah43
<br /> blah44
<br /> blah45
<br /> blah46
<br /> blah47
<br /> blah48
<br /> blah49
<br /> blah50
<br /> blah51
<br /> blah52
<br /> blah53
<br /> blah54
<br /> blah55
<br /> blah56
<br /> blah57
<br /> blah58
<br /> blah59
<br /> blah60
<br /> blah61
<br /> blah62
<br /> blah63
<br /> blah64
<br /> blah65
<br /> blah66
<br /> blah67
<br /> blah68
<br /> blah69
<br />
</div>
<div class="site-sidebar-right">
<div style="background-color:lightgray;">
right1
<br /> right2
<br /> right3
<br /> right4
<br /> right5
<br /> right6
<br /> right7
<br /> right8
<br /> right9
<br /> right10
<br />
</div>
</div>
</div>
</div>
<div class="site-footer">
<div style="height: 40px;background-color:YellowGreen">My Footer Test </div>
</div>
</div>上一篇: Flexbox full height and width with side panels
下一篇: Nested flexbox with 100% height and scrollbar on element (not browser)