jquery - 标题下方的响应式全屏叠加导航

Question

我创建了一支笔来陪伴我的问题:

http://codepen.io/mtorosian/pen/tKGcF

HTML

<div id="header"><a href="#" id="trigger">Trigger</a></div>
<div id="overlay">
<table cellspacing="0" cellpadding="0" border="0" class="nav">
    <tr>
        <td class="nav-box-1">Test</td>
        <td class="nav-box-2">Test</td>
    </tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" class="nav">
    <tr>
        <td class="nav-box-3">Test</td>
        <td class="nav-box-4">Test</td>
    </tr>
</table>    
</div>

CSS

* {
    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%;
    }
}

jQuery

$( document ).ready(function() {

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

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

尝试确定构建位于网站标题下方的全屏叠加层的最佳方式。在较大的屏幕上，这 4 个部分将各占屏幕的 25%，而在较小的屏幕上，它将堆叠成四边形结构，顶部两个，底部两个，各占 50%。我觉得我在我创造的笔中有这种作用，但想知道这是否是解决它的最佳方法。在这种布局中使用表格对我来说感觉有点草率。我开始使用 display: table 和 display: table-cell 的 div 结构，但无法像使用实际表格那样在较小的屏幕上使用 50% 的高度部分。

Answer 1

要使 height: 100% 正常工作，您需要将父元素(body、html、#overlay)设置为 height: 100%

http://jsbin.com/quwisexodi/1/edit?html,css,js,output

我使用 calc(100% - 100px) 来设置 #main 的高度，因为 #header 有一个静态像素高度.如果我们在 #header 和 height:90% 上使用 height:10%，则 calc() 不再必要的。