<!-- 利用绝对定位实现 -->
<style media="screen">
html,body,.parent{height: 100%;overflow: hidden;}
.top,.left,.right,.bottom{text-align: center;}
.top{position: absolute;top:0;left: 0;right: 0;height: 100px;background: #5a9bd5;}
.left{position: absolute;top:100px;left:0;bottom: 50px;width: 200px;background: #c65a11}
.right{position: absolute;overflow: auto;left:200px;right:0;top:100px;bottom:50px;background: #0170c0}
.bottom{position: absolute;left:0;right:0;bottom:0;height: 50px;background: #6f31a0}
</style>
<body>
<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="bottom">bottom</div>
</div>
</body>
<!-- 利用flex实现 -->
<style media="screen">
html,body,.parent{height: 100%;}
.parent{display: flex; flex-direction:column;}
.top{height: 100px;background: #5a9bd5;}
.bottom{height: 50px;background: #c65a11}
.middle{flex: 1; display: flex;}
.left{ width: 200px;background: #0170c0}
.right{ flex: 1; overflow: auto;background: #6f31a0}
</style>
<body>
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
