javascript - 如何让一个div适合100%的手机屏幕

Question

当用户在移动版本中单击“汉堡导航”时，无论他们选择什么元素，都会出现一个弹出窗口，我的问题是弹出窗口不适合整个屏幕和滚动。当您向下滚动时，它会显示不属于弹出窗口的部分。当用户手机垂直放置时它工作正常，因为我在媒体查询的弹出窗口中添加了“高度:100vh”。但是当用户手机水平放置时，它不起作用。我尝试了一切，但我无法修复它。我添加了“位置:固定”这似乎有效但是当你向下滚动时它会在那里但是当你继续滚动时它会消失这不是我想要的。我基本上想要当用户在移动设备上向下滚动时弹出到 react 灵敏并保持 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 单位来执行此操作。这些单位将根据视口(viewport)的大小调整内容的大小。例如:

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 .