如何使div適合100％的手機屏幕

Question

當用戶在移動版本中單擊「漢堡導航」時，無論他們選擇什麼項目，都會顯示一個彈出窗口，我的問題是彈出窗口不適合在那裏整個屏幕和滾動。當您向下滾動時，它會顯示一個不屬於彈出窗口的部分。當用戶手機垂直放置時，它工作正常，因爲我在媒體查詢的彈出窗口中添加了「height：100vh」。但是，當用戶手機水平放置時，它不起作用。我試過了一切，我無法修復它。我添加了「位置：固定」這似乎工作，但當你向下滾動它會在那裏，但是當你保持滾動，這不是我想要的。基本上想要當用戶滾動到移動設備上，爲彈出窗口做出反應並保持100％的身高。這是我上傳到代碼筆的代碼。

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

CSS如果水平

@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時出現垂直

@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; 

     } 
} 

Answer 1

您可以使用vh和vw單位要做到這一點。這些單位將根據視口的大小調整內容的大小。例如：

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

如果vh和vw字段不支持你的工作，瀏覽器，你需要做的是在javascript：

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

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

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

*您可以檢查瀏覽器的支持here。