fixedしたドロワーメニューの項目が最下部まで表示できない

Question

前提・実現したいこと

WEBサイトにドロワーメニューをつけようとしています。
画面右上に設置したボタンをクリックしてメニューを開閉、というところまでは順調に進みました。
閉じているメニューは画面右側から現れるようにCSSで調整しています。

発生している問題・エラーメッセージ

サイトにはヘッダーがあり、そのヘッダーぶん（height:80px）を避けてメニューを表示したいので、potision:fixedしたメニューにtop:80pxを入力してあります。（CSSの該当箇所にコメントアウトで目印をつけております。）
しかし、これが影響して開いたメニューが80pxぶん見切れてしまいます。margin-topでも試したものの同じ挙動に。
これをどうにか解消したいです。

↑この下に「D」がありますが、これ以上スクロールが下にいかない状態です。

該当のソースコード

<div id="globalNavi">
	<div id="navToggle">
		<div>
			<span></span> <span></span> <span></span><p class="menu">MENU</p>
		</div>
	</div>
	<nav>
		<ul class="menu globalnavi">
			<li class="button"><a href="#">A</a></li>
			<li class="button"><a href="#">B</a></li>
			<ul class="submenu">
				<li class="button"><a href="#">a</a></li>
				<li class="button"><a href="#">b</a></li>
				<li class="button"><a href="#">c</a></li>
			</ul>
			<li class="button"><a href="#">C</a></li>
			<li class="button"><a href="#">D</a></li>
		</ul>
	</nav>
</div>	

#navToggle,
#navToggle span {
	display: none;
	transition: all .5s;
	box-sizing: border-box;
}
#navToggle {
	position: fixed;
	right: 15px;
	top: 15px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 10;
	background-color: rgba(255,255,255,0.9);
}
#navToggle span {
	position: absolute;
	width: 38px;
	height: 1px;
	background-color: #888;
	margin-left: 6px;
}
#navToggle span:nth-of-type(1) {
	top: 7px;
}
#navToggle span:nth-of-type(2) {
	top: 16px;
}
#navToggle span:nth-of-type(3) {
	top: 25px;
}

#navToggle .menu{
	font-size: 11px; font-size: 1.1rem;
	position: absolute;
	border: none;
	color: #505050;
	top: 36px;
	left: 6px;
}

@media screen and (max-width: 1279px) {

 /*該当箇所です*/
#globalNavi nav {
	position: fixed;
	width: 220px;
	height: 100%;
	right: -600px;
	top: 80px;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
	overflow-y: auto;
	z-index: 10;
	background-color: rgba(255,255,255,0.9);
}

.openNav nav {
	-webkit-transform: translateX(-600px);
	transform: translateX(-600px);
}

#navToggle,#navToggle span {display: block;}

.openNav #navToggle span:nth-of-type(1),
.openNav #navToggle span:nth-of-type(3) {
	width: 14px;
}

.openNav #navToggle span:nth-of-type(1) {
	-webkit-transform: translate(24px,5px) rotate(34deg);
	transform: translate(24px,5px) rotate(34deg);
}

.openNav #navToggle span:nth-of-type(3) {
	-webkit-transform: translate(24px,-5px) rotate(-34deg);
	transform: translate(24px,-5px) rotate(-34deg);
}
} 

$(function () {
    $('#navToggle').click(function () { 
            $('#globalNavi').toggleClass('openNav');
    });
	$('.button').on('click', function(){ 
        if (window.innerWidth <= 1279) {
            $('#navToggle').click();
        }
    });
});

---

補足

CSS内の #globalNavi nav について、ウインドウのサイズに関わらず縦いっぱいに表示したいため、heightは100%のままで解決したいと思っております。

---

動作確認はchrome（71/mac）とsafari（12.0.3/mac）で行なっております。
該当箇所についていろいろと試行錯誤したのですが、どうしてもうまくいかず相談させていただきます。
アドバイスいただけましたら幸いです。よろしくお願いいたします。

Answer 1

CSS内の #globalNavi nav について、ウインドウのサイズに関わらず縦いっぱいに表示したいため、heightは100%のままで解決したいと思っております。

とありますが、

#globalNavi nav {
  height: calc(100% - 80px)
}

ではだめなのですか？

Comments

[atsushi_m]

ありがとうございます！おかげさまで解決できました！！
浅学で恥ずかしながらcalcを知りませんでした。今しがた少し記事を読んで学びましたが…おかげさまでお尋ねした箇所以外でもいろいろとコードも手間も省けそうで嬉しいです。

自分だけではずっと悩んでいたと思います、心から御礼申し上げます！