物理条占窗体高度(clientHeight),如何实现滑动不被遮挡

场景

有这样一个场景，一个页面，顶部有一个高度为162px和底部84px的容器做了固定定位，而这两个容器中间有一个容器，里面的内容是一个列表，要求根据内容可以实现滑动。若是用var WinHeight=document.body.clientHeight获取body窗体的高度,然后用'WinHeight'减去顶部及底部的固定高度和246px,再给列表容器加overflow:scroll，可以实现效果。

兼容问题说明

但是若是如Android手机下面有物理返回条，在计算body高度的时候会把这部物理高度包含，出现的效果：若还是减246px,就是物理条区域会遮挡底部固定区域的一部分。这样一来，有的手机的物理条，有的没有，就不好处理了。

处理方案

<div style="height:100%"> // 外层加一个div容器，设置高度为100%
    <div style="position:fixed;height:162px;width:100%;"></div> 
    <!--列表-->
    <div style="height:100%;overflow:scroll;" id="list"> // 列表容器设置高度为100%，再设置可以滚动
              <ul>
                    <li>列表内容</li>
                    ...
              </ul>
    </div>
    <div style="position:fixed;height:84px;width:100%;"></div>  
</div>   

另外加如下样式，保证顶部及底部不被挡住

    #list{padding: 162px 0 84px 0;}