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

方案：flex布局

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

html

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