JS-将Div Height设置为Window Height

Question

在下面的小文件中，如果红色div高度大于窗口高度，则蓝色div高度将为0。如果红色div高度小于窗口高度，则蓝色div高度将为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>