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

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

转载作者：塔克拉玛干更新时间：2023-11-02 10:24:52

当用户在移动版本中单击“汉堡导航”时，无论他们选择什么元素，都会出现一个弹出窗口，我的问题是弹出窗口不适合整个屏幕和滚动。当您向下滚动时，它会显示不属于弹出窗口的部分。当用户手机垂直放置时它工作正常，因为我在媒体查询的弹出窗口中添加了“高度: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;

        }
}

最佳答案

您可以使用 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 .

关于javascript - 如何让一个div适合100%的手机屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43400861/

文章推荐： c# - UIControllerView 不会从委托(delegate)函数更新

文章推荐： ios - 来自视频 : Default to speaker 的 Swift 音频

文章推荐： c# - UIImageView 在触摸时更改 UIImage 然后恢复以前的 UIImage

文章推荐： ios - 更新已发送的通知 ios 10

c# - 适合/填充图像？
我正在制作一个简单的程序来更改我的计算机背景。我在网上发现了一个stackoverflow问题，或多或少涵盖了我想做的事情。我现在可以成功地将我的墙纸更改为平铺、居中和从在线图像 URL 拉伸(str
mysql - 适合 where 子句的组中的最大值
是的，这是另一个每组最大的问题之一!我已经尝试了几天，试图解决这个问题，但无济于事。我也一直在寻找，但我什至不知道我是否在正确的地方寻找。问题的最简化版本如下。我有 2 个表，一个是多对多表，另一个
适合 JavaME 语法的编译器推荐？
我想解析一些数据，我有一个 BNF 语法来解析它。谁能推荐任何能够生成可在移动设备上使用的代码的语法编译器？由于这是针对 JavaME 的，因此生成的代码必须是: 希望很小对外来 Java 库的依
r - 适合 ARIMA 模型
我有一个动物园时间序列对象，vels : 2011-05-01 00:00:00 7.52 2011-05-01 00:10:00 7.69 2011-05-01 00:20:00 7.67 2011
osgi - 适合 ERP 等应用程序的框架
我想创建一个供小型制造公司使用的生产管理系统。该系统将允许记录设备制造的不同阶段。要求如下: 1.非基于浏览器的界面。需要基于 Swing 或 AWT 的东西。虽然我了解实现基于浏览器的解决方案的便利
clojure - Lamson 适合 clojure？
是否有任何 java 或 clojure 邮件库可以实现 lamson 的功能？特别是lamson的邮件路由功能非常酷http://verpa.wordpress.com/2010/11/13/mak
python - Sklearn - 适合、缩放和变换
sklearn 中的 fit() 方法似乎在同一界面中服务于不同的目的。应用于训练集时，像这样: model.fit(X_train, y_train) fit() 用于学习稍后将在测试集上使用 p
javascript - 适合 map 内的边界
我使用 OSM 显示县的边界。它在大多数情况下工作得很好，但在某些情况下，县更大并且不适合 map 。如何在开始渲染之前调整缩放级别？ var map = L.map("mapCnty").setV
javascript - 适合 JavaScript 的大小
我正在致力于缩小和丑化我的 javascript 文件。我想知道合适的尺寸是多大。如果我将所有js文件合并成一个文件(经过缩小和丑化)，它会大于1mb。我想，最好将它们分成 2-3 个文件(每个文件
java - TextArea 适合 GridPane
我是 Java 新手。我想在 GridPane 中放置一个 TextArea。我在过去几个小时内尝试了此操作，结果如下: 如您所见，TextArea 比我的 Gridpane 大得多。这是我的代码:
python - Sklearn - 适合、缩放和变换
sklearn 中的 fit() 方法似乎在同一界面中服务于不同的目的。应用于训练集时，像这样: model.fit(X_train, y_train) fit() 用于学习稍后将在测试集上使用 p
r - 适合 ARIMA 模型的时间序列的方差
我认为这是一个基本问题，但也许我混淆了这些概念。假设我使用 R forecast 包中的函数 auto.arima() 将 ARIMA 模型拟合到时间序列。该模型假设方差不变。我如何获得该方差？是残
javascript - 适合 map 内的边界
我使用 OSM 显示县的边界。它在大多数情况下工作得很好，但在某些情况下，县更大并且不适合 map 。如何在开始渲染之前调整缩放级别？ var map = L.map("mapCnty").setV
ios - 适合 UItableView 单元格中的文本
我有一个很长的标签，这是我的第一个标签，我想把它放在我的单元格中。这就是我所拥有的，但它不起作用。我有一个自定义的 UITabelviewCell ，里面有几个标签。 -(CGFloat)table
python - 适合 WCS 来治愈
假设我有一个包含 WCS header 的 FITS 文件，这样我就可以执行以下操作: #import healpy as hp #import astropy.io.fits as pyfits #
适合 Web 设计师初学者的 jQuery
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭10 年前。 Improve
c# - 适合 Unity 的抽象工厂
我们正在构建一个与其他系统有多个集成接触点的应用程序。我们有效地使用 Unity 来满足我们所有的依赖注入(inject)需求。整个业务层是用接口(interface)驱动的方法构建的，实际实现在应用
ios - 适合 MKMapView 部分的注释
我得到了 MKMapView 和一些注释。我使用下一个代码来显示所有注释: NSArray *coordinates = [self.mapView valueForKeyPath:@"annotat
php - 适合 MySQL 查询最新状态
我在一家托管公司工作，我们经常收到安装、新域、滞后修复等方面的请求。为了大致了解仍然开放的内容，我决定制作一个非常简单的票务系统。我有一点 php 知识和一点 MySQL 知识。目前，我们将根据客户的
ios - 适合 UITableView 整个背景的图像大小
我想向我的 UITableView 添加背景图像，它适合 UI，还具有导航 Controller 和工具栏。在那种情况下，我没有找到适合 iPhone 和 iPad 不同屏幕的 tableview 的

塔克拉玛干

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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