当高度为100％时，CSS-DIV不滚动到底部

Question

我正在尝试制作类似于toyota.com网站的移动体验。基本上我希望菜单的DIV出现，并有一个溢出滚动条。我已经将HTML和body标签设置为100％，但是我发现菜单没有达到底部。它并没有达到底部，因为标题的高度。但是，我不知道如何解决这个问题。我曾多次看到这个问题，但这些案例似乎与我自己的情况不同。

如果可能的话，你可以看看我的JSFiddle吗？它可以在这里找到：https://jsfiddle.net/x5cry4Lx/5/

我现有的CSS（作为参考）...：

html, body { 
    height: 100%; 
} 
body.mobile-nav-open { 
    overflow: hidden; 
} 
.starter-template { 
    text-align: center; 
} 
section#header { 
    height: auto; 
    padding: 15px; 
    border-bottom: 1px solid #000; 
    background: #fff; 
    height: 36px; 
} 
section#header a.openNav, 
section#header a.closeNav { 
    font-size: 11px; 
    color: #000; 
    text-decoration: none; 
    text-transform: uppercase; 
} 
section#header a.openNav i, 
section#header a.closeNav i { 
    display: block; 
    font-size: 20px; 
    text-align: center; 
} 
section#header a.closeNav { 
    display: none; 
} 
body.mobile-nav-open section#header a.openNav { 
    display: none; 
} 
body.mobile-nav-open section#header a.closeNav { 
    display: block; 
} 
section#mobile-menu { 
    width: 100%; 
    height: 100%; 
    background: #fff; 
    z-index: 999; 
    display: none; 
    overflow-y: scroll; 
} 
section#mobile-menu li { 
    list-style: none; 
} 
section#mobile-menu li a { 
    text-decoration: none; 
} 

而我的HTML（作为参考）...：

<section id="header"> 
    <div class="pull-right"> 
    <a href="#" class="openNav"><i class="fa fa-bars"></i>Menu</a> 
    <a href="#" class="closeNav"><i class="fa fa-close"></i>Close</a> 
    </div> 
    <div class="clearfix"></div> 
</section> 
<section id="mobile-menu"> 
    <div class="container"> 
    <div class="starter-template"> 
     <ul class="list-unstyled"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    </div> 
</section> 

任何非常感谢帮助！

Answer 1

有不同的方法来实现这一点。

1.使用calc。其中67px是标题的高度。

变化：

html, 
body { 
    height: 100%; 
    margin: 0; 
} 

section#mobile-menu { 
    width: 100%; 
    height: calc(100% - 67px); 
    background: #fff; 
    z-index: 999; 
    display: none; 
    overflow-y: scroll; 
} 

2.使你的头position:absolute;和给身体padding-top:67px;。

DEMO

变化：

* { 
    box-sizing:border-box; 
} 

body { 
    padding-top:67px; 
    margin:0; 
} 

section#header { 
    padding: 15px; 
    border-bottom: 1px solid #000; 
    background: #fff; 
    height: 67px; 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
} 

Answer 2

height: calc(100% - topbar height); 

使用CSS calc财产。