Question

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

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％。我觉得我在创作的笔中有点工作，但想知道这是否是解决它的最好方法。对于我来说这种布局使用表格感觉有点草率。我开始使用显示的div结构：table和display：table-cell但是无法使50％高度部分在较小的屏幕上工作，就像使用实际表格一样。

Answer 1

要让height: 100%工作，您需要将父元素（body，html，＃override）设置为height: 100%

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

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

在标题下方响应全屏叠加导航

1 个答案: