计算容器中间固定高度的两种方法

计算容器中间固定高度的两种方法

1. 使用clac计算属性来计算容器的高度

步骤：

1. 给最外层的父容器设置一个100%的视口高度（viewport height）：100vh
2. 中间父容器的高度 = calc（100% - （容器底部元素占用的高度 + 容器顶部元素占用的高度））

如图所示：

则上图中的middleWrapper的高度为：calc(100%-96px)

2.使用定位来计算中间容器的高度

步骤：

1. 给最外层的父容器设置一个相对定位：position：relative
2. 给中间容器设置一个绝对定位：position:absolute
3. 利用属性top和bottom来控制中间容器距离上下的距离。

<div class="parent">
	<div class="top"></top>
	<div class="middle"></top>
	<div class="bottom"></top>
</div>

<style scoped>
.parent