2017-04-13 12 views
1

モバイル版の「burger nav」をクリックすると、選択した項目があればポップアップが表示され、ポップアップがそこに収まらないという問題があります画面全体とスクロールします。下にスクロールすると、ポップアップの一部ではない部分が表示されます。メディアクエリのポップアップに「高さ:100vh」を追加したので、ユーザーの電話機が垂直に位置していればうまく動作します。しかし、ユーザの電話機が水平に位置している場合、それは機能しません。私はすべてを試して、私はそれを修正することはできません。私は "ポジション:固定"を追加しましたが動作していたようですが、スクロールするとそこにはありますが、スクロールしているときは私が望んでいないものはありません。応答性があり、100%の高さに留まります。ここにコードペンにアップロードされている私のコードです。モバイル画面のdivフィットを100%作成する方法

http://codepen.io/anon/pen/dWyKaE 

CSS HORIZONTAL

@media screen and (max-width: 667px) { 
    #burger-nav{ 
     display: block; 
     width: 100%; 
     height: 40px; 
     background: url(burgerlogo.png) no-repeat 98% center; 
     background-size: 30px 30px; 
     background-color: white; 

    } 
    #burger-nav.show{ 
     background-color: #f97072; 
    } 
    #nav-menu{ 
     background-color: white; 
     margin: 0; 
     padding:0; 
     width: 100%; 
     height:auto; 
     overflow: hidden; 
     display: none; 

    } 
    #nav-menu.open{ 
     display: block; 
     z-index: 100; 
     position: absolute; 
    } 
    #nav-menu li{ 
     float: none; 
     padding: 10px; 
     position: relative; 
     text-align: right; 
     top:0; 
     left:0; 
     cursor: pointer; 
     border-bottom: 0.1px solid #f8f9fb; 
     display: block; 
     font-weight: bold; 

    } 
    #nav-menu li:hover { 
     background-color: #f8f9fb; 
    } 
    #name-div{ 
     position: absolute; 
     top: 8%; 
     left: 0%; 
     z-index: 10; 
     -webkit-user-select: none; 
     -ms-user-select: none; 
     -moz-user-select: none; 
     -o-user-select: none; 

      } 
    #name.show{ 
     position: relative; 
     bottom: 40px; 
    } 
     .bubbles li:nth-child(1) { 
       top:100px; 
       left: 300px; 
      } 
     .bubbles li:nth-child(2) { 
       left: 100px; 
       top:100px; 

      } 
    .bubbles li:nth-child(3) { 
       left: 200px; 
       top:0px; 

      } 
    .bubbles li:nth-child(4) { 
       left: 150px; 
       top:200px; 
      } 
    .bubbles li:nth-child(5) { 
       left: 250px; 
       top:200px; 
      } 
    .bubbles li:nth-child(6) { 
       left: 250px; 
       top:200px; 
      } 
     #job-popup{ 
       width: 100%; 
       height: 100%; 
      margin: 0; 
      padding: 0; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div1{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div1:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon1{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #job-box1{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #job-text1{ 
      text-align: center; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
/* End of Job CSS --------------------------------------------------------------------------------------- */ 
     #contact-popup{ 
       width: 100%; 
       height: 100%; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div2{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div2:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon2{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #contact-box2{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #contact-text2{ 
      text-align: center; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
/* End of Contact CSS --------------------------------------------------------------------------------------- */ 

    #press-popup{ 
       width: 100%; 
       height: 100%; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div3{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div3:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon3{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #press-box3{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #press-text3{ 
      text-align: center; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
/* End of Legal CSS --------------------------------------------------------------------------------------- */ 
    #legal-popup{ 
       width: 100%; 
       height: 100%; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div4{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div4:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon4{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #legal-box4{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #legal-text4{ 
      text-align: center; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
/* End of Legal CSS --------------------------------------------------------------------------------------- */ 
    #support-popup{ 
       width: 100%; 
       height: 100%; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div5{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div5:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon5{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #support-box5{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #support-text5{ 
      text-align: center; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
} 

CSS VERTICAL

@media screen and (max-width: 375px) { 
    #burger-nav{ 
     display: block; 
     width: 100%; 
     height: 40px; 
     background: url(burgerlogo.png) no-repeat 98% center; 
     background-size: 30px 30px; 
     background-color: white; 

    } 
    #burger-nav.show{ 
     background-color: #f97072; 
    } 
    #nav-menu{ 
     background-color: white; 
     margin: 0; 
     padding:0; 
     width: 100%; 
     height:auto; 
     overflow: hidden; 
     display: none; 

    } 
    #nav-menu.open{ 
     display: block; 
     z-index: 100; 
     position: absolute; 
    } 
    #nav-menu li{ 
     float: none; 
     padding: 10px; 
     position: relative; 
     text-align: right; 
     top:0; 
     left:0; 
     cursor: pointer; 
     border-bottom: 0.1px solid #f8f9fb; 
     display: block; 
     font-weight: bold; 

    } 
    #nav-menu li:hover { 
     background-color: #f8f9fb; 
    } 
    #name-div{ 
     position: absolute; 
     top: 30%; 
     left: 0%; 
     z-index: 10; 
     -webkit-user-select: none; 
     -ms-user-select: none; 
     -moz-user-select: none; 
     -o-user-select: none; 

      } 
    #name{ 
     font-size: 4em; 
    } 
    #name.show{ 
     position: relative; 
     bottom: 40px; 
    } 
     .bubbles li:nth-child(1) { 
       top:100px; 
       left: 300px; 
      } 
     .bubbles li:nth-child(2) { 
       left: 100px; 
       top:400px; 

      } 
    .bubbles li:nth-child(3) { 
       left: 200px; 
       top:0px; 

      } 
    .bubbles li:nth-child(4) { 
       left: 150px; 
       top:200px; 
      } 
    .bubbles li:nth-child(5) { 
       left: 250px; 
       top:200px; 
      } 
    .bubbles li:nth-child(6) { 
       left: 250px; 
       top:200px; 
      } 
     #job-popup{ 
       width: 100%; 
       height: 100%; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div1{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div1:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon1{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #job-box1{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #job-text1{ 
      text-align: center; 
      display: none; 
      position: relative; 
      top:6%; 
      left:0; 
      font-size: 1.2em; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
/* End of Job CSS --------------------------------------------------------------------------------------- */ 
     #contact-popup{ 
       width: 100%; 
       height: 100%; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div2{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div2:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon2{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #contact-box2{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #contact-text2{ 
      text-align: center; 
      display: none; 
      position: relative; 
      top:6%; 
      left:0; 
      font-size: 1.2em; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
/* End of Contact CSS --------------------------------------------------------------------------------------- */ 

    #press-popup{ 
       width: 100%; 
       height: 100%; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div3{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div3:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon3{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #press-box3{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #press-text3{ 
      text-align: center; 
      display: none; 
      position: relative; 
      top:6%; 
      left:0; 
      font-size: 1.2em; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
/* End of Legal CSS --------------------------------------------------------------------------------------- */ 
    #legal-popup{ 
       width: 100%; 
       height: 100%; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div4{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div4:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon4{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #legal-box4{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #legal-text4{ 
      text-align: center; 
      display: none; 
      position: relative; 
      top:6%; 
      left:0; 
      font-size: 1.2em; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
/* End of Legal CSS --------------------------------------------------------------------------------------- */ 
    #support-popup{ 
       width: 100%; 
       height: 100%; 
       position:absolute; 
       top:0; 
       left:0; 
       z-index: 102; 
       background: hsla(0,0%,97%,.7); 
       display: none; 
       } 

      #x-div5{ 
       width: 70px; 
       height: 40px; 
       border-radius: 100%; 
       background: #1e1e1e; 
       opacity: 0.3; 
       border-radius: 0 25px 25px 0; 
       position: relative; 
       left:0px; 
       top:1%; 
       z-index: 1000; 
       cursor: pointer; 
       display: none; 
      } 
      #x-div5:hover{ 
       background-color: rgb(218, 85, 47); 
      } 
     #xicon5{ 
      color: white; 
      font-size: 1.2em; 
      position: relative; 
      top:10px; 
      left: 0; 
      z-index: 1002; 
      bottom: 20px; 
      font-weight: bold; 
      display: none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 
     } 
     #support-box5{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      left:0; 
      top:0; 
      padding-right: 0; 
      background-color: white; 
      word-wrap: break-word; 
      display: none; 


     } 
     #support-text5{ 
      text-align: center; 
      display: none; 
      position: relative; 
      top:6%; 
      left:0; 
      font-size: 1.2em; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -o-user-select: none; 

     } 
} 

答えて

1

あなたはこれを行うにはvhvwユニットを使用することができます。これらの単位は、ビューポートのサイズに関連してコンテンツのサイズを設定します。

div { 
    width: 100vw; 
    height: 100vh; 
} 

vhvwフィールドは、あなたが作業してブラウザでサポートされていない場合は、JavaScriptでそれを行う必要があります:たとえば

$(document).ready(function(){ 
    resizeDiv(); 
}); 

window.onresize = function(event) { 
    resizeDiv(); 
} 

function resizeDiv() { 
    vpw = $(window).width(); 
    vph = $(window).height(); 
    $(‘#somediv’).css({‘height’: vph + ‘px’}); 
} 

*あなたは、ブラウザのサポートhereを確認することができます。

+0

WAIT実際にはO_Oでしたが、私が垂直に戻ったときにはうんざりしましたが、私にチェックさせてくれるようです。 – Jagr

+0

OMGありがとうSOOO !!!これは本当に助けました:D – Jagr

+0

@oneoneguy90問題はありません!あなたはそれを働かせましたか? – Tony

関連する問題