JSを使って、スマホのファーストビュー100vhが上手くできない

Question

スマホの際、ファーストビューの高さ100%で表示したいのですが、jsが上手く行ってないのか、cssが上手くいいてないのか分からなくて困っています。
どなたか分かる方教えていただけませんか、、

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

ERROR: 'document' is not defined. [no-undef]	var mainVisual = document.getElementById('js-kv');

ERROR: 'window' is not defined. [no-undef]	var winH = window.innerHeight;

ERROR: 'window' is not defined. [no-undef]	window.addEventListener('resize', imageJustSize);

該当のソースコード

<div id="main">

  <div class="kv" id="kv">
			<!--	slide   -->
			<div class="swiper-container slide01">
				<div class="swiper-wrapper">
					<div class="swiper-slide slide-img lazyload" id="js-kv" data-bg="images/kv-ganban-shop.jpg" style="background-image: url(images/kv-ganban-shop.jpg);">
						<div class="slide-box">
							<div class="slide-inner">
								<a href="https://ganban.net/?p=36287" class="article">
									<p class="cat">XXXXXX</p>
									<p class="slide-title">XXXXXX</p>
									<p class="sec-btn">XXXXXX</p>
								</a>
							</div>
						</div>
					</div>
					<div class="swiper-slide slide-img lazyload" id="js-kv" data-bg="images/kv-ganban-shop.jpg" style="background-image: url(images/kv-ganban-shop.jpg);">
						<div class="slide-box">
							<div class="slide-inner">
								<a href="https://ganban.net/?p=36287" class="article">
									<p class="cat">XXXXXX</p>
									<p class="slide-title">XXXXXX</p>
									<p class="sec-btn">XXXXXX</p>
								</a>
							</div>
						</div>
					</div>
				</div>
				<!--	pagination   -->
				<div class="swiper-pagination"></div>
				<!--	slide-button   -->
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</div>
		</div>
    </div>
</div>

#main {
	width: 100%;
	overflow-x: hidden;
}

.kv {
	width: 100%;
}

.slide-img {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 100vh;
	max-height: 900px;
	position: relative;
}

@media screen and (max-width: 768px){
	
	.kv {
		height: 100%;
	}
	
	.slide-img {
		height: 100vh;
	}
}

試したその1
//メイン画像高さ100vh
function imageJustSize() {
  var mainVisual = document.getElementById('js-kv');
  var winH = window.innerHeight;
  mainVisual.style.height = winH + 'px';
}

imageJustSize();

window.addEventListener('resize', imageJustSize);

試したその2
$(function(){
var hSize = $(window).height();
  $('#js-kv').height(hSize);
});
$(window).resize(function(){
var hSize = $(window).height();
  $('#js-kv').height(hSize);
});

試したこと

上記のjsコードを試しても、アドレスバーを含んだ高さを取得されてしまい、ファーストビューの下部が切れてしまいます。
他にも調べて出た方法で、height:100vhを使用しないでheight:100%を使用する方法を試しました。
その際、スマホのファーストビューの高さ100%で、画像下も切れないようにはなったのですが、ページ下部までスクロールすると挙動が変になりました。。（カクカクした感じ、最下部にいくと少しの間上に戻れない等）
※jQueryも読込済みです

Answer 1

スマホ100vhはアドレスバーを含んだ高さになってしまいます。まだアドレスバーがあるときと、スクロールして消えたときにresizeイベントが発生します。

最初の表示を綺麗にしたいのなら、load時にのみ高さを設定すればいいと思います。
下記のコードで、#js-kvに対して高さ設定はできるので、あとはcssだと思います。

試したその1
//メイン画像高さ100vh
function imageJustSize() {
  var mainVisual = document.getElementById('js-kv');
  var winH = window.innerHeight;
  mainVisual.style.height = winH + 'px';
}

imageJustSize();

window.addEventListener('load', imageJustSize);

Comments

[Junkfoodboy]

ご回答いただきありがとうございます。
いただいたコードを試してみましたが、私の理解が乏しくCSSをどう修正したら良いのか理解できてません。。
.slide-imgのheightを100vhにするとアドレスバーの高さが含まれてしまいますので、.slide-imgと.kvと#mainのheightも100%に指定したところ、ファーストビューで上部のアドレスバーと下部のタブ部分を除いて全体表示ができました。

ですが、ページ下部までスクロールするとフッター手前で一度停止しないとフッターまでスクロール出来なくなってしまうなど、挙動がおかしくなります。
CSSはどう指定すると改善できるのでしょうか。。？