Заполнить оставшуюся высоту назад совместимость

Question

Я пытаюсь сделать мой div заполнить оставшуюся высоту. Мне удалось сделать это следующим образом:

html{ 
    height: 100%; 
} 
body{ 
    height: 100%; 
    overflow: hidden; 
} 
.my-container{ 
    height: 100%; 
} 

Вот JS скрипку я сделал, чтобы продемонстрировать свое решение: https://jsfiddle.net/w1k3po37/1/

Мой вопрос, я чувствую, что я вроде взлома поведение по умолчанию с переполнением, и мне было интересно, правильно ли я сделал это, и если есть лучший способ или есть какие-то последствия, за которыми я должен следить, потому что я это сделал? Имейте в виду, что мне нужно, чтобы это все еще работало с IE8. Такие вещи, как calc, я не могу использовать.

EDIT:

После работы с этим на некоторое время, мое ограничение в том, что если высота составляет более 100%, страница не прокручивается. Кто-нибудь знает, каким образом я могу выполнить это без использования таблиц или отображения: свойства таблиц?

Answer 1

Прост в использовании с абсолютным позиционированием.

.container {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #ccf;}

<div class="container"></div>

Это работает даже в IE 6!