Jquery 标题下方的响应式全屏覆盖导航

我创建了一支笔来回答我的问题：

HTML

jQuery

$( document ).ready(function() {

var header = $('#header').outerHeight();

$( "#trigger" ).click(function() {
    $('#overlay').toggleClass('active');
    $('#overlay').css({'top' : header});
});
});

---

试图确定在网站标题下方构建全屏覆盖的最佳方式。在较大的屏幕上，4个部分各占屏幕的25%，而在较小的屏幕上，4个部分将堆叠成四元结构，顶部两个，底部两个，各占50%。我觉得这在我创作的笔里有些作用，但我想知道这是否是解决这个问题的最好方法。我觉得在这种布局中使用表格有点马虎。我开始使用display:table和display:table单元格的div结构，但无法像使用实际表格那样在较小的屏幕上使用50%的高度部分。

要获得

高度：100%

要工作，需要将父元素（body、html、#overlay）设置为

高度：100%

---

我使用了

calc（100%-100px）

来设置

#main

的高度，因为

#header

具有静态像素高度。如果我们在

#header

上使用

height:10%

和

height:90%

，

calc（）

不再是必需的。

不要使用

表格来设计网站。使用网格系统怎么样？一个css网格，比如这个：Aaron，我不是用表格来设计整个网站，只是想确定如何像codepen演示中显示的那样进行覆盖。我也不知道网格会有什么帮助。
* {
    margin: 0;
    padding: 0;
}
#header {
    background-color: #fff;
    padding: 20px 0;
    border: 1px solid red;
}
#overlay {
    display: none;
    position: fixed;
    background-color: #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
#overlay.active{
    display: block;
}
.nav {
    float: left;
    width: 50%;
    height: 100%;
}
.nav td {
    text-align: center;
    vertical-align: middle;
}
.nav-box-1 {
    background-color: red;
}
.nav-box-2 {
    background-color: blue;
}
.nav-box-3 {
    background-color: green;
}
.nav-box-4 {
    background-color: yellow;
}
@media screen and (max-width: 767px) {
    .nav  {
        width: 100%;
        height: 50%;
    }
}

$( document ).ready(function() {

var header = $('#header').outerHeight();

$( "#trigger" ).click(function() {
    $('#overlay').toggleClass('active');
    $('#overlay').css({'top' : header});
});
});