移动端div自动填满剩余高度

移动端div自动填满剩余高度

1、移动端，高度不确定。
2、前面内容高度也不确定。
3、剩下的div需要填满余下的高度做一些事情
4、网上查找了一些，自己试了试，觉得用flex挺方便的。

// div box下包含三块，最后一块是需要高度自动填满的
<div class="box">
	<div class="c1"></div>
	<div class="c2"></div>
	<div class="c3"></div>
</div>

对应的样式：：

.box{
		box-sizing: border-box;
		height:100%;
		position: absolute;
		width:100%;
		display:flex;
		flex-direction:column;
}
// c1 c2随便写
.c3{
	flex:1;
}

这样，无论前两个子元素怎么折腾，余下的也会自动占满了，并且根据不同移动端高度大小不同，会自动适应。