ハンバーガーメニューのコンテンツ本体の高さについて

今回、はじめて質問させていただきます。
深夜に失礼いたします。web初心者です。

「今回ハンバーガーメニューを設置したいと思っております。」

〜やりたい事〜
スマホ画面で表示した時を想定してます。
右上のハンバーガーボタンを押したら、左からメニューコンテンツが表示される。
上部は、ロゴ表示（背景白）。
そのあと、liタグメニューを10段表示。
残りの下の余白は白で埋める。

発生している問題点

質問１）メニュー1からメニュー10まで表示したあとの、余白がなくスクロールが現れる。画面下いっぱいまで余白がほしい。
ボタンを押して左から出てきたメニューを上下は100%で、左から70%くらいの幅で表示させたい。

質問２）メニュー10の下にスクロールが現れる。画面横幅を100％としたら、コンテンツ部分は左側から70％から75％くらいで表示させたい。

〜テスト環境〜
Mac（safari firefox chromeの３つのブラウザ）と、xperia XZ2で表示確認してます。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="format-detection" content="telephone=no">
6<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no">
7<link href="style.css" rel="stylesheet" type="text/css">
8</head>
9    
10<body>
11
12	
13	
14<div id="wrap">
15<header id="header">
16  	  <div class="header-logo-menu">
17  	  <div id="nav-drawer">
18      <input id="nav-input" type="checkbox" class="nav-unshown">
19      <label id="nav-open" for="nav-input"><span></span></label>
20      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
21      <div id="nav-content">
22		  <!-- ここからメインメニュー -->
23<ul id="menu">
24<li><img src="" alt="ロゴ" width="100%"></li>
25<li><a href="">　　 ホーム<br />
26<font size="2%">　　 Home</font></a></li>
27<li><a href="">　　 メニュー1<br />
28<font size="2%">　　 Menu1</font></a></li>
29<li><a href="">　　 メニュー2<br />
30<font size="2%">　　 Menu2</font></a></li>
31<li><a href="">　　 メニュー3<br />
32<font size="2%">　　 Menu3</font></a></li>
33<li><a href="">　　 メニュー4<br />
34<font size="2%">　　 Menu4</font></a></li>
35<li><a href="">　　 メニュー5<br />
36<font size="2%">　　 Menu5</font></a></li>
37<li><a href="">　　 メニュー6<br />
38<font size="2%">　　 Menu6</font></a></li>
39<li><a href="">　　 メニュー7<br />
40<font size="2%">　　 Menu7</font></a></li>
41<li><a href="">　　 メニュー8<br />
42<font size="2%">　　 Menu8</font></a></li>
43<li><a href="">　　 メニュー9<br />
44<font size="2%">　　 Menu9</font></a></li>
45<li><a href="">　　 メニュー10<br />
46<font size="2%">　　 Menu10</font></a></li>
47</ul><!-- ここまでメインメニュー --></div>
48  </div>
49  <div class="logo-erea"><img src="" alt="ロゴ" width="100%"></div>
50  </div>
51</header>
52    </div>

css
1#wrap {
2    max-width: 100%;
3    border: 0px dashed #FF9900;
4    margin: 0px auto;
5}
6.logo-erea{text-align:center;margin:auto;
7	}
8
9
10#header {
11    background: #999;
12    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.2));
13	display: flex;
14	height: 45px;
15    padding: 10px 0px 5px 20px;
16    position: fixed;
17    justify-content: space-between;
18	width: 100%;
19	z-index: 99;
20}
21
22#nav-drawer {
23  position: absolute; 
24	top: 15px;		
25	right: 50px;		
26
27}
28
29.nav-unshown {
30  display:none;
31}
32
33.logo-erea{
34	display:block;
35	text-align:center;
36	padding:0px 50px 0px 0px;
37	margin:auto;
38	}
39	
40#nav-open {
41  display: inline-block;
42  width: 30px;
43  height: 22px;
44  vertical-align: middle;
45}
46
47#nav-open span, #nav-open span:before, #nav-open span:after {
48  position: absolute;
49  height: 4px;
50  width: 30px;
51  border-radius: 4px;
52  background: #fff;
53  display: block;
54  content: '';
55  cursor: pointer;
56}
57#nav-open span:before {
58  bottom: -10px;
59}
60#nav-open span:after {
61  bottom: -20px;
62}
63
64#nav-close {
65  display: none;
66  position: fixed;
67  z-index: 9998;
68  top: 0;
69  left: 0;
70  width: 100%;
71  height: 100%;
72  background: black;
73  opacity: 0;
74  transition: .3s ease-in-out;
75
76#nav-content {
77  overflow: auto;
78  position: fixed;
79  top: 0;
80  left: 0;
81  z-index: 9999;
82  width: 65%;
83  max-width: 400px;
84  width: 100%;
85  background: #fff;
86  transition: .3s ease-in-out;				
87  -webkit-transform: translateX(-105%);
88  transform: translateX(-105%);
89}
90
91#nav-input:checked ~ #nav-close {
92  display: block;
93  opacity: .5;
94}
95
96#nav-input:checked ~ #nav-content {
97  -webkit-transform: translateX(0%);
98  transform: translateX(0%);
99  box-shadow: 6px 0 25px rgba(0,0,0,.15);
100}
101
102.header-logo-menu{
103	display: flex;
104	display: -moz-flex;
105	display: -o-flex;
106	display: -webkit-flex;
107	display: -ms-flex;
108	flex-direction: row;
109	-moz-flex-direction: row;
110	-o-flex-direction: row;
111	-webkit-flex-direction: row;
112	-ms-flex-direction: row;
113}
114
115ul#menu {
116	width:100vh;
117	padding:0px 0px 0px 0px;	
118	margin:0px;			
119	float:none;			
120	}
121#menu li {
122	list-style-type:none;		
123	display:inline;				
124}
125#menu li a {
126	display:block;			
127	width:100%; height:24px;	
128	padding:12px 0px 14px 10px;	
129	text-decoration:none;		
130	line-height:110%;	
131	border-bottom:1px solid; 	
132	border-color:#bbb; 	
133	background-image:none;		
134	background-repeat:no-repeat;	
135	background-color:#eee;	
136	font-size: 14px;
137	color:#555;			
138}
139