admin管理员组文章数量:1410682
When a user clicks the "burger nav" in the mobile version, whatever item they select, a popup will appear and my problem is that the popup doesn't fit there whole screen and scrolling. When you scroll down, it reveals a portion that isn't apart of the popup. It works fine when the users phone is position vertically because I added "height: 100vh" to the popup in the media query. But when the users phone is position horizontally, it doesn't work. I Tried everything and I cannot fix it. I added "position: fixed" which seemed to work but when you scroll down it would be there but does away when you keep scrolling which is not what I want.Ibasically want for when a user scrolls down on the mobile, for the popup to be responsive and stay 100% height. Here is my code which is uploaded to a code pen.
CSS WHEN HORIZONTAL
@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 WHEN VERTICAL
@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;
}
}
When a user clicks the "burger nav" in the mobile version, whatever item they select, a popup will appear and my problem is that the popup doesn't fit there whole screen and scrolling. When you scroll down, it reveals a portion that isn't apart of the popup. It works fine when the users phone is position vertically because I added "height: 100vh" to the popup in the media query. But when the users phone is position horizontally, it doesn't work. I Tried everything and I cannot fix it. I added "position: fixed" which seemed to work but when you scroll down it would be there but does away when you keep scrolling which is not what I want.Ibasically want for when a user scrolls down on the mobile, for the popup to be responsive and stay 100% height. Here is my code which is uploaded to a code pen.
http://codepen.io/anon/pen/dWyKaE
CSS WHEN HORIZONTAL
@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 WHEN VERTICAL
@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;
}
}
1 Answer
Reset to default 4You can use the vh and vw units to do this. These units will size the content in relation to the size of the viewport. For example:
div {
width: 100vw;
height: 100vh;
}
If the vh and vw fields are not supported on the browser your working with, you will need to do it in javascript:
$(document).ready(function(){
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$(‘#somediv’).css({‘height’: vph + ‘px’});
}
*You can check browser support here.
本文标签： javascriptHow to make a div fit 100 of a mobile screenStack Overflow
版权声明：本文标题：javascript - How to make a div fit 100% of a mobile screen - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744945346a2633741.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论