定位解决自适应元素等高

定位和自适应感觉是扯不上关系的两个东西,但是最近在做一个商城项目的时候,使用这两个配合,给我一个很大的惊喜,接下来上图片来更直观的把问题和解决方法贴出来

问题: 这是一个pc端的订单页面,我的布局是整个大盒子,overflow:auto,左侧横向的宽度67%左浮动,右侧竖着的(从边框可以看出来),宽度32.5%右浮动,左右两个元素中都加了overflow:auto,因为现在虽然写的是静态页面,但是等着接下来对接口,左侧的数据不是固定的,可能会有一条商品信息,也可能会有很多条.
但是造成个问题,就是左侧自适应的高度撑起来了父元素,右侧自适应高度内容少,撑不起来,边框就这个样子了,我当时想的是直接给子元素加height:100%,但是没生效
解决方式: 给大盒子添加position: relative定位,
右侧元素相对于父元素定位
position: absolute;
right: 0;
top: 0;
bottom: 0;
这样这个问题就解决了,效果图