clientHeight IE与Chrome固定页脚

Question

在一个应用程序中，我想要一个固定的页脚（一个div停留在所有内容的前面，而不是页面底部的粘性页脚），上面有一个可滚动的div。使用以下代码，一切正常：

<style>
.page{
   position:absolute;
   top: 0;
   bottom: 0px;
   overflow:auto; 
}
.footer{
   position:fixed;
   bottom: 0;
   height: 40px;
   background-color:blue;
   width:100%;
}
</style>
<div class="page"></div>
<div class="footer"></div>

除了使用ui-select创建的下拉列表将显示页脚后面的下拉菜单...如果在下拉列表下方没有空格，则ui-select组件可以自动向上定位drowpdown。该检查适用于： document.documentElement.clientHeight （https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight）

在搜索时，我来到了这些网站。

clientHeight/clientWidth returning different values on different browsers https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

关于Internet Explorer模型错误（我不确定高度是否也受到影响），边框包含在clientHeight中，但边距不包含在内。这就是我添加保证金底部的原因：40px;到html标签...

html{
   margin-bottom:40px;
    }

...从clientHeight减去40。除了Internet Explorer（主要目标浏览器:(）

之外，它工作正常

我创建了一个测试来显示不同的行为（我还读到只在IE的resize事件中计算出的值是正确的，所以我使用了一个resize listener来打印clientHeght ....你必须将代码复制/粘贴到本地html文件以进行测试：

https://jsfiddle.net/93rvoftk/

结果：

如您所见，clientHeight未正确计算。

所以我的问题是：

1. 是否有可能带来互联网爆炸（我们称之为），以计算正确的价值？
2. 您是否还有其他想法可以阻止下拉列表显示在页脚后面？更改ui选择代码不是一种选择。
3. 你是否有任何其他想法来实现一个粘性页脚（一个像工具栏一样粘在窗口底部的div，而不是像粘性页脚一样粘在页面末端）关于元素重叠和下拉的问题ui-select的列表？

提前非常感谢，我整天搜索了一个解决方案......

亲切的问候

MOE