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

场景

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

兼容问题说明

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

处理方案

 // 外层加一个div容器，设置高度为100%
    
 
    
    
 // 列表容器设置高度为100%，再设置可以滚动
              

                    
列表内容
                    ...
              
    
    
  
   

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

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