菜鸟教程小白 发表于 2022-12-13 01:02:27

javascript - 如何使 div 适合 100% 的移动屏幕


                                            <p><p>当用户在移动版本中单击“汉堡导航”时,无论他们选择什么元素,都会出现一个弹出窗口,我的问题是该弹出窗口不适合整个屏幕和滚动。当您向下滚动时,它会显示不属于弹出窗口的部分。当用户手机垂直放置时它工作正常,因为我在媒体查询的弹出窗口中添加了“height: 100vh”。但是当用户手机水平放置时,它就不起作用了。我尝试了一切,但我无法修复它。我添加了“位置:固定”,这似乎有效,但是当你向下滚动时它会在那里,但当你继续滚动时它会消失,这不是我想要的。当用户在移动设备上向下滚动时,我基本上想要弹出窗口 react 灵敏并保持 100% 的高度。这是我上传到代码笔的代码。</p>

<pre><code>http://codepen.io/anon/pen/dWyKaE
</code></pre>

<p>水平时的 CSS</p>

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

      }
}
</code></pre>

<p>垂直时的 CSS</p>

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

      }
}
</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>您可以使用 <code>vh</code> 和 <code>vw</code> 单元来执行此操作。这些单位将根据视口(viewport)的大小调整内容的大小。例如:</p>

<pre><code>div {
    width: 100vw;
    height: 100vh;
}
</code></pre>

<p>如果您使用的浏览器不支持 <code>vh</code> 和 <code>vw</code> 字段,则需要在 javascript 中进行:</p>

<pre><code>$(document).ready(function(){
    resizeDiv();
});

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

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

<p>*您可以查看浏览器支持<a href="http://caniuse.com/#feat=viewport-units" rel="noreferrer noopener nofollow">here</a> .</p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 如何使 div 适合 100% 的移动屏幕,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/43400861/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/43400861/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - 如何使 div 适合 100% 的移动屏幕