Css 用固定页眉将页面分成4等份

我试图用固定的页眉将一页分成4个相等的部分（2x2网格）。到目前为止，我有一个分为4个，但由于标题，页面将超过100%

我希望这4个部分只占用屏幕上的可用空间，而不是使页面滚动，而是相等

HTML:

到目前为止，请参见演示：

---

我还希望能够使其具有响应性，以便当页面小于690px时，每个块都可以更改为100%宽度和固定高度，因此需要记住这一点。

我建议您将代码更改为：

---

我抛出了一些

width:100%

，因为默认情况下块元素将填充父元素。

IE8和IE9支持calc函数吗？我想所有的现代浏览器都会

<header></header>

<div class="container">
    <div class="block blue"></div>
    <div class="block green"></div>
    <div class="block purple"></div>
    <div class="block red"></div>
</div>

html, body {
height: 100%;
}

header {
    width: 100%;
    height: 117px;
     background-color: grey;
}

.container {
    width: 100%;
    height: 100%;
}

.block {
    width: 50%;
    height: 50%;
    float: left;
}

.blue {
    border-top: 4px solid blue; 
}  

.green {
    border-top: 4px solid green;
}

.purple {
    border-top: 4px solid purple;
}

.red {
    border-top: 4px solid red;
}

html, body {
    height: 100%;
}

header {
    height: 117px;
    background-color: grey;
}

.container {
    height: calc(100% - 117px);
}

.block {
    width: 50%;
    height: 50%;
    float: left;
}