JS - Установить высоту Div на высоту окна

Question

В моем маленьком файле ниже я хочу иметь его, где, если красная высота деления больше, чем высота окна, то синяя высота деления будет 0. Если красная высота деления меньше, чем высота окна, то высота синего деления будетустановите его высоту, где синий и красный div будут помещаться в окне.

Этот код ниже работает в Firefox, но не работает в Chrome или ie / edge.Это моя борьба, заставляющая его работать во всех браузерах.

<style>

body {
    margin: 0px;
}

#red {
    height: 200px;

    background-color: red;
}

#blue {
    background-color: blue;
}

</style>

<div id="red"></div>
<div id="blue"></div>

<script>

document.getElementsByTagName('DIV')[1].style.height = (window.innerHeight - document.body.offsetHeight) + 'px';

</script>