リサイズしてもヘッダーの高さはブラウザに合わせたい

やりたいこと
<header>の要素をどのブラウザで見てもファーストビューのように一画面に収まるようにしたいです。

現状ではブラウザの高さを変えると<header>が下のコンテンツに重なってしまい崩れてしまいます。タブレットで見たときは<header>の要素が上部にあって、下が空きすぎています。
いい感じに収まるようにしたいです。

<header id="header">
 <div class="head__inner">
  <h2 class="subtitle">This is subtitle.</h2>
   <h1 class="title">MAIN-TITLE</h1>
     <p class="ruby">メインタイトル</p>
            </div>
 <div class="head__outer">
  <div class="head__title">
   <p class="lead">日本語のテキストが入ります。<br>
     <span>Coming Soon...2019 Autumn</span></p>
                </div>

   <a href="#concept" class="scrollDown"><img src="./assets/img/scrollDown.png" alt=""></a>
            </div>
</header>

.head__inner{
    padding-top: 152px;
    width: calc(100% - 20%);
    margin: 0 auto;
    text-align: center;

    @include mq(md){
        padding-top: 74px;
        width: 100%;

    }
    .title{
      font-size: 8.75rem;
      font-weight: 600; 
      font-style: normal;
      margin-top: 68px;
      line-height: 100%;

      @include mq(md){
          font-size: 70px;
          margin-top: 34px;
      }
    }
    .subtitle{
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: 2px;

        @include mq(md){
            line-height: 1.3;
        }
    }
    .ruby{
        font-size: 16px;
        margin-top: 40px;
    }
}
.head__outer{
    width: calc(100% - 50%);
    margin: 0 auto;
    margin-top: 68px;
    text-align: center;

    @include mq(md){
        width: 100%;
        margin: 0 auto;
        margin-top: 68px;
    }
    .head__title{
        width: calc(100% - 50%);
        margin-right: auto;
        margin-left: auto;

        @include mq(sm){
            width: 90%;
            margin: 0 1rem;
        }
        @include mq(md){
            width: 90%;
            margin: 0 1rem;
        }
    }
    .lead{
        width: 100%;
        line-height: 1.8;
        text-align: center;
        font-size: 1.375rem;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 68px;
    }
    span{
        letter-spacing: 0.08em;
        padding-bottom: 28px;
        font-size: 24px;
    }
    .lead::after{
        content: "";
        width: 100%;
        position: relative;
        top:0;
        left: 0;
        display: inline-block;
        border-bottom: 1px solid #000;
        transform: skew(1deg, -1deg);
    }
    .scrollDown{
        height: 100%;
        margin-top: 68px;

    }
 }

ブレイクポイントの設定は以下です。

$breakpoint-sm: 599px !default;
$breakpoint-md: 959px !default;
$breakpoint-lg: 1279px !default;

$breakpoints: (
    'sm': 'screen and (max-width: 599px)',
    'md': 'screen and (max-width: 959px)',
    'lg': 'screen and (max-width: 1279px)'
) !default;

@mixin mq($breakpoint: md){
    @media #{map-get($breakpoints, $breakpoint)}{
        @content;
    }
}

ブラウザをリサイズしたときの高さは取得できました。

    const resize = () => {
        let h = window.innerHeight;
        let elm = document.getElementById('header');
        elm.style.height = h + 'px';

        console.log(h);
    }
    window.addEventListener('load',resize);
    window.addEventListener('resize',resize);

ご回答宜しくお願い致します。