60127


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

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

[code]

    <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>
    
    
[/code]

[code]

    .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;
    
        }
     }
    
[/code]

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

[code]

    $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;
        }
    }
    
[/code]

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

[code]

        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);
    
[/code]

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


CC BY-SA 4.0
2019-08-21T07:26:09.137
57515
2019-10-30T11:32:17.917
question
javascript css
リサイズしてもヘッダーの高さはブラウザに合わせたい


javascriptは使わずに、header要素にheight: 100vh;とするのはいかがでしょうか？


CC BY-SA 4.0
2019-10-30T11:32:17.917
60127
2019-10-30T11:32:17.917
36420
57515
answer