css中div高度自适应且固定剩余高度由另外div内容填充

最近做个页面设计，头部是搜索框以及过滤按钮那些，而剩余高度内容则是列表内容用来显示过滤后的内容。在移动设备显示头部内容会随屏幕大小而改变，所以不能把高度设定死，但剩余部高度又要显示列表内容。

构思是头部有一部分的高度随着内容的变化而变化，但这头部是固定的fiexd。剩余部分是列表高度。

每次试验发现都虽说下面列表有接在头部位置下面但是当页面往上拉时列表内容会跑到头部内容的下一层去。
一次意外嵌套的尝试发现解决上拉列表时顶部的位置问题以及头部高度自适应问题。直接上代码↓
CSS：

.header-height{    position: fixed;    height: auto;    width: 100%;    z-index: 1;}.listBody-height{    height: 100%;}

HTML：

<div class="header-height"><!-- 在这里放页面头部固定的内容 --><div class="listBody-height"><!-- 在这里写列表数据 --></div></div>

代码中可以看出头部的高度设置为auto了，而列表的高度设为100%占页面剩余的高度。