css关于height:100%和撑满高度的问题

Question

<div class="top"></div>

<div class="mid">
  <div class="left"></div>
  <div class="right"></div>
</div>

<div class="bot"></div>

布局是常规的上、中（左、右）、底布局。上下都是固定高度的，而且下部不是fixed定位。
现在遇到的问题是中部，left是固定宽度，高度要撑满整个父元素mid，右边是撑满。mid的高度也是由right撑开的。
height：100%是不生效的。
先考虑用position：absolute处理，但是父元素撑不开了，整个bot飘上来了。
要实现这个效果该如何做呢。

Answer 1

如果 mid 是由 right 撑开那只需要让 left 基于 mid absolute，right 的左边给上 left 宽度的 margin 即可。

如果是满屏则 top 和 bot 都是 absolute 于 top 和 bottom。mid 不赋予高度，absolute top 为 top 的高度，bottom 为 bot 的高度，left 和 right 为 0，margin auto。

Answer 2

那mid可以试一试用display:flex。left可以width:固定宽度，right可以flex:1,来达到左右高度相同，撑开父集。

Answer 3

height：100%需要先定义html和body的高度为height：100%才生效的

Answer 4

html,body{height:100%}