CSS - 当高度为 100% 时，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;并给 body 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%;  
}