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 способен автоматически размещать выпадающий список вверх, если под выпадающим списком нет места. Проверка работает с: document.documentElement.clientHeight ( https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)

Во время поиска я зашел на эти сайты.

clientHeight / clientWidth возвращает разные значения в разных браузерах https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Что касается ошибки модели Internet Explorer (я не уверен, что высота тоже влияет), граница включена в clientHeight, а поле - нет. Вот почему я добавил маржинальное основание: 40px; в тег HTML...

html{
   margin-bottom:40px;
    }

... вычесть 40 из высоты клиента. Это работает нормально, за исключением Internet Explorer (основной целевой браузер:()

Я создал тест, чтобы показать другое поведение (я также читал, что только в событии изменения размера IE значение рассчитывается правильно, поэтому я использовал слушатель изменения размера для печати clientHeght.... Вы должны скопировать / вставить код для локального файла HTML, чтобы проверить это:

https://jsfiddle.net/93rvoftk/

Результаты:

Как видите, clientHeight рассчитан неправильно.

Итак, мои вопросы:

1. Есть ли шанс принести интернет-эксплореру (так мы его называем), чтобы вычислить правильное значение?
2. Есть ли у вас какая-либо другая идея, чтобы предотвратить появление раскрывающегося списка за нижним колонтитулом? Изменение кода UI-Selects не вариант.
3. Есть ли у вас какие-либо другие идеи по реализации липкого нижнего колонтитула (div, который прилипает к нижней части окна, как панель инструментов, а не к концу страницы, как липкий нижний колонтитул) относительно проблемы перекрытия элементов и выпадающих списков пользовательского интерфейса? -Выбрать?

Заранее большое спасибо, я весь день искал решение...

С уважением

МОС