Javascript 如何使div 100%适合移动屏幕
当用户在移动版本中点击“汉堡导航”时，无论他们选择什么项目，都会出现一个弹出窗口，我的问题是，弹出窗口不适合整个屏幕和滚动。当您向下滚动时，它会显示一个不在弹出窗口中的部分。当用户的手机垂直放置时，它可以正常工作，因为我在媒体查询的弹出窗口中添加了“height:100vh”。但是当用户的手机水平放置时，它就不工作了。我什么都试过了，但我无法修复它。我添加了“position:fixed”（位置：固定），它似乎可以工作，但当你向下滚动时，它会在那里，但当你继续滚动时它会消失，这不是我想要的。我主要希望当用户在手机上向下滚动时，弹出窗口能够响应并保持100%的高度。这是我上传到代码笔的代码Javascript 如何使div 100%适合移动屏幕,javascript,jquery,html,ios,css,Javascript,Jquery,Html,Ios,Css,当用户在移动版本中点击“汉堡导航”时，无论他们选择什么项目，都会出现一个弹出窗口，我的问题是，弹出窗口不适合整个屏幕和滚动。当您向下滚动时，它会显示一个不在弹出窗口中的部分。当用户的手机垂直放置时，它可以正常工作，因为我在媒体查询的弹出窗口中添加了“height:100vh”。但是当用户的手机水平放置时，它就不工作了。我什么都试过了，但我无法修复它。我添加了“position:fixed”（位置：固定），它似乎可以工作，但当你向下滚动时，它会在那里，但当你继续滚动时它会消失，这不是我想要的。我主
http://codepen.io/anon/pen/dWyKaE
@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;
}
}
@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;
}
}
您可以使用
vhvwdiv {
width: 100vw;
height: 100vh;
}
vhvw$(document).ready(function(){
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$(‘#somediv’).css({‘height’: vph + ‘px’});
}
*您可以查看浏览器支持。等等，实际上它很有效，但当我回到垂直方向时，似乎该浏览器被弄乱了，但让我检查一下，实际上nvm我有一个输入错误：D谢谢much@thatoneguy90不幸的是，如果您使用的浏览器（如某些移动浏览器）不支持这些单元，您需要使用javascript来实现它。我用一些代码更新了答案，可能会对你有所帮助