全手打原创，转载请标明出处：https://www.cnblogs.com/dreamsqin/p/11972664.html，多谢，=。=~
一、背景描述
对于通用型带过滤条件的列表查询项目中，列举下面两种常见功能需求，要满足内容高度、宽度自适应：
1、上中下布局，包括查询条件、卡片数据、分页；
2、上中下布局，包括查询条件、表格数据、分页；
二、现状分析
最常用的经典方法是position定位加上top和bottom属性实现高度自适应，该方式存在的最大问题在于只能实现上中下其中一个模块的高度自适应，剩余模块的高度需要固定，与此同时还需满足查询条件的宽度自适应。
常见的实现方式有以下3种，并分别阐述它们存在的问题。
方式1：固定查询条件的高度和最小宽度，需要让视觉量身定制出一套完美的展现方式，控制每项查询条件的宽度，使得在浏览器宽度变窄时也能完全展示。
存在的问题：查询条件数量较多时通常会被固定成两行或三行展示，导致多余空间占用，如果使用iframe嵌套时最小宽度与容器不统一还会出现内部滚动条。若新需求需要新增查询条件，则需要视觉重新设计，同时前端人员需要修改样式代码。
方式2：采用媒体查询@media，需要让视觉根据常见屏幕宽度做适配，前端再根据不同屏幕宽度撰写相应样式代码。
存在的问题：代码量大、复杂度高，屏幕尺寸覆盖不全，范围边界值不准确会导致显示异常，同样对于有需求新增查询条件的情况，视觉设计及前端代码变动较大。
方式3：查询条件高度自适应，表格高度固定。
存在的问题：页面空间没有充分利用，有大量留白，不利于用户体验。