當高度爲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財產。