在某些特定的场景中，如视频播放、可视化图表占位等一些高宽需要固定的比例。如果占位区间是由固定值确定，那么我们皆大欢喜，但在目前的的应用发展中宽高自适应的方式才能满足我们的需求，那么我们该如何这种自适应的宽高比布局呢？ 宽高比也称纵横比，元素的纵横比描述了其宽度和高度之间的比例关…

上述代码中，wrapW与wrapH是外容器的，cW与cH是要进行比例调控的容器。 首先我们要先计算出一个方向的缩放宽度，判断是否超出外容器，如果没有超出，那么表示等比缩放在该外容器内，如果超出，则反向进行计算。

缺点：如果有文字出现，布局就会错乱，导致扩展性不好。 3、将未浮动的middle挤了下去。 此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来； 如果某一列内容过多，文字会溢出。解决方法：等高布局；

源码地址：https://github.com/ZYuMing/Blog/blob/master/layout.html效果图：①顶部栏+内容模块+底部栏的高度之和小于浏览器高度②顶部栏+内容模块+底