01-多个div垂直分布，其中有一个高度需要自适应手机高度

方案：flex布局

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

html

<div class="play-template">
    <div class="top"></div>
    <div class="lrc"></div>
    <div class="slider"></div>
    <div class="bottom"></div>
</div>

css

思路：父控件充满整个屏幕，第二部分的高度充满屏幕的剩余间距，主要属性
flex-grow 1
flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。其值为一个权重（也称扩张因子），默认为 0（纯数值，无单位），剩余空间将会按照这个权重来分配。
flex-shrink 属性定义空间不够时各个元素如何收缩。其值默认为 1

.play-template
    position fixed
    margin 0px
    padding 0px
    width 100%
    height 100%
    display flex
    flex-direction column   //主轴方向
  .top
    height 70px
    background-color red
  .lrc
    flex-grow 1
    background-color blue
  .slider
    height 40px
    background-color red
  .bottom
    height 90px
    background-color blue

效果展示

57AB0E182C8BBB40F027321C2C5BDBB3.jpg

附：

flex-shrink 属性定义空间不够时各个元素如何收缩。其值默认为 1.
举个例子：
父元素 500px。三个子元素分别设置为 150px，200px，300px。
三个子元素的 flex-shrink 的值分别为 1，2，3。
首先，计算子元素溢出多少：150 + 200 + 300 - 500 = -150px。
那这 -150px 将由三个元素的分别收缩一定的量来弥补。
具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。
所以总权重为 1 * 150 + 2 * 200 + 3 * 300 = 1450
三个元素分别收缩：

150 * 1(flex-shrink) * 150(width) / 1450 = -15.5
150 * 2(flex-shrink) * 200(width) / 1450 = -41.4
150 * 3(flex-shrink) * 300(width) / 1450 = -93.1

三个元素的最终宽度分别为：

150 - 15.5 = 134.5
200 - 41.4 = 158.6
300 - 93.1 = 206.9