自适应布局踩坑

我们通常会遇到这样一个场景，头部或底部元素高度不确定，中间内容的高度也不确定，这时如果不加以设置，那么内容可能会超出容器大小，或者容器的大小会发生变化

那么这种场景下该如何设置css样式，以满足不同显示器的要求

例如：

<div class='left-container'>
	<div class='title'>111111111</div>
	<div class='box'>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class='bottom'></div>
</div>

首先需要思考的一个问题是：三个div的高度该设置什么值？

设置为px、em、rem吗？

设置这三种值会发生什么，当我们放大页面时，由于设置的高度为固定大小，那么页面是放不下的，页面会出现滚动条，而我们希望的是它能进行局部滚动

设置为vw、vh的好处？
当进行页面缩放时，不同块之间是保持一样的比例进行缩放的，也就是之前页面能显示三个模块，而采用em进行放缩可能在第一框视图只能显示两个模块，但是采用vh三个模块都能显示，并且仍旧按照之前的比例

那么还存在问题，当放缩时，页面内容超出容器大小，这时要给容器设置overflow：auto实现局部滚动