方案：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