フルスクリーン写真をスマホで見た際に下部のメニューバーが含まれる

前提・実現したいこと

スライドショープラグインのslickを使用して背景としてフルスクリーン表示しています。
PCだと問題ないのですが、スマホで見た際に下部メニューバーの高さまで写真が表示されてしまいます。
このメニューバーを含めずスライドショーを表示したいのです。
下記サイトは動画ですがフルスクリーンのイメージです。
http://www.greenpacks-corp.com/

javascriptなど無知のため詳しい方教えていただければ幸いです。

追記
コードも書かず失礼しました。改めてよろしくお願いします。
スマホ閲覧時にスライドショー部分をスクロールした際、下部にアドレスバー分の余白が空いてしまいます。

html
1<div class="slider">
2<div><div class="item1 thum"></div></div>
3<div><div class="item2 thum"></div></div>
4</div>

CSS
1.slider {position:relative;z-index:0;width:100vw;height:100vh;}
2.slider .thum{position:relative;overflow:hidden;width:100vw; height:100vh; margin:auto;background-repeat:no-repeat;object-fit:cover;}
3.slider .item1{background-image:url(../img/1.jpg);background-position:center center;background-size:cover;}
4.slider .item2{background-image:url(../img/2.jpg);background-position:center center;background-size:cover;}

jQuery
1$('.slider').slick({
2	autoplay: true,
3	speed: 2300,
4	dots: true,
5	fade: true,
6	swipeToSlide: true,
7	infinite: true,
8	arrows: false
9});
10
11var sliderArea = $('.slider');
12var sliderH = window.innerHeight ? window.innerHeight: $(window).height();
13$(window).on('load resize', function(){
14	sliderH = window.innerHeight ? window.innerHeight: $(window).height();
15	sliderArea.css({'height':sliderH});
16});