javascript - 如何使 div 适合 100% 的移动屏幕
<p><p>当用户在移动版本中单击“汉堡导航”时，无论他们选择什么元素，都会出现一个弹出窗口，我的问题是该弹出窗口不适合整个屏幕和滚动。当您向下滚动时，它会显示不属于弹出窗口的部分。当用户手机垂直放置时它工作正常，因为我在媒体查询的弹出窗口中添加了“height: 100vh”。但是当用户手机水平放置时，它就不起作用了。我尝试了一切，但我无法修复它。我添加了“位置:固定”，这似乎有效，但是当你向下滚动时它会在那里，但当你继续滚动时它会消失，这不是我想要的。当用户在移动设备上向下滚动时，我基本上想要弹出窗口 react 灵敏并保持 100% 的高度。这是我上传到代码笔的代码。</p>
<pre><code>http://codepen.io/anon/pen/dWyKaE
</code></pre>
<p>水平时的 CSS</p>
<pre><code>@media screen and (max-width: 667px) {
#burger-nav{
display: block;
width: 100%;
height: 40px;
background: url(burgerlogo.png) no-repeat 98% center;
background-size: 30px 30px;
background-color: white;
}
#burger-nav.show{
background-color: #f97072;
}
#nav-menu{
background-color: white;
margin: 0;
padding:0;
width: 100%;
height:auto;
overflow: hidden;
display: none;
}
#nav-menu.open{
display: block;
z-index: 100;
position: absolute;
}
#nav-menu li{
float: none;
padding: 10px;
position: relative;
text-align: right;
top:0;
left:0;
cursor: pointer;
border-bottom: 0.1px solid #f8f9fb;
display: block;
font-weight: bold;
}
#nav-menu li:hover {
background-color: #f8f9fb;
}
#name-div{
position: absolute;
top: 8%;
left: 0%;
z-index: 10;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#name.show{
position: relative;
bottom: 40px;
}
.bubbles li:nth-child(1) {
top:100px;
left: 300px;
}
.bubbles li:nth-child(2) {
left: 100px;
top:100px;
}
.bubbles li:nth-child(3) {
left: 200px;
top:0px;
}
.bubbles li:nth-child(4) {
left: 150px;
top:200px;
}
.bubbles li:nth-child(5) {
left: 250px;
top:200px;
}
.bubbles li:nth-child(6) {
left: 250px;
top:200px;
}
#job-popup{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div1{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div1:hover{
background-color: rgb(218, 85, 47);
}
#xicon1{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#job-box1{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#job-text1{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Job CSS --------------------------------------------------------------------------------------- */
#contact-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div2{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div2:hover{
background-color: rgb(218, 85, 47);
}
#xicon2{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#contact-box2{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#contact-text2{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Contact CSS --------------------------------------------------------------------------------------- */
#press-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div3{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div3:hover{
background-color: rgb(218, 85, 47);
}
#xicon3{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#press-box3{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#press-text3{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#legal-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div4{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div4:hover{
background-color: rgb(218, 85, 47);
}
#xicon4{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#legal-box4{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#legal-text4{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS ---------------------------------------------------------------------------------------*/
#support-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div5{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div5:hover{
background-color: rgb(218, 85, 47);
}
#xicon5{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#support-box5{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#support-text5{
text-align: center;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
}
</code></pre>
<p>垂直时的 CSS</p>
<pre><code>@media screen and (max-width: 375px) {
#burger-nav{
display: block;
width: 100%;
height: 40px;
background: url(burgerlogo.png) no-repeat 98% center;
background-size: 30px 30px;
background-color: white;
}
#burger-nav.show{
background-color: #f97072;
}
#nav-menu{
background-color: white;
margin: 0;
padding:0;
width: 100%;
height:auto;
overflow: hidden;
display: none;
}
#nav-menu.open{
display: block;
z-index: 100;
position: absolute;
}
#nav-menu li{
float: none;
padding: 10px;
position: relative;
text-align: right;
top:0;
left:0;
cursor: pointer;
border-bottom: 0.1px solid #f8f9fb;
display: block;
font-weight: bold;
}
#nav-menu li:hover {
background-color: #f8f9fb;
}
#name-div{
position: absolute;
top: 30%;
left: 0%;
z-index: 10;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#name{
font-size: 4em;
}
#name.show{
position: relative;
bottom: 40px;
}
.bubbles li:nth-child(1) {
top:100px;
left: 300px;
}
.bubbles li:nth-child(2) {
left: 100px;
top:400px;
}
.bubbles li:nth-child(3) {
left: 200px;
top:0px;
}
.bubbles li:nth-child(4) {
left: 150px;
top:200px;
}
.bubbles li:nth-child(5) {
left: 250px;
top:200px;
}
.bubbles li:nth-child(6) {
left: 250px;
top:200px;
}
#job-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div1{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div1:hover{
background-color: rgb(218, 85, 47);
}
#xicon1{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#job-box1{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#job-text1{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Job CSS --------------------------------------------------------------------------------------- */
#contact-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div2{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div2:hover{
background-color: rgb(218, 85, 47);
}
#xicon2{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#contact-box2{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#contact-text2{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Contact CSS --------------------------------------------------------------------------------------- */
#press-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div3{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div3:hover{
background-color: rgb(218, 85, 47);
}
#xicon3{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#press-box3{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#press-text3{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS --------------------------------------------------------------------------------------- */
#legal-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div4{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div4:hover{
background-color: rgb(218, 85, 47);
}
#xicon4{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#legal-box4{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#legal-text4{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
/* End of Legal CSS ---------------------------------------------------------------------------------------*/
#support-popup{
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
z-index: 102;
background: hsla(0,0%,97%,.7);
display: none;
}
#x-div5{
width: 70px;
height: 40px;
border-radius: 100%;
background: #1e1e1e;
opacity: 0.3;
border-radius: 0 25px 25px 0;
position: relative;
left:0px;
top:1%;
z-index: 1000;
cursor: pointer;
display: none;
}
#x-div5:hover{
background-color: rgb(218, 85, 47);
}
#xicon5{
color: white;
font-size: 1.2em;
position: relative;
top:10px;
left: 0;
z-index: 1002;
bottom: 20px;
font-weight: bold;
display: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
#support-box5{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
padding-right: 0;
background-color: white;
word-wrap: break-word;
display: none;
}
#support-text5{
text-align: center;
display: none;
position: relative;
top:6%;
left:0;
font-size: 1.2em;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}
}
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您可以使用 <code>vh</code> 和 <code>vw</code> 单元来执行此操作。这些单位将根据视口(viewport)的大小调整内容的大小。例如:</p>
<pre><code>div {
width: 100vw;
height: 100vh;
}
</code></pre>
<p>如果您使用的浏览器不支持 <code>vh</code> 和 <code>vw</code> 字段，则需要在 javascript 中进行:</p>
<pre><code>$(document).ready(function(){
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$(‘#somediv’).css({‘height’: vph + ‘px’});
}
</code></pre>
<p>*您可以查看浏览器支持<a href="http://caniuse.com/#feat=viewport-units" rel="noreferrer noopener nofollow">here</a> .</p></p>
<p style="font-size: 20px;">关于javascript - 如何使 div 适合 100% 的移动屏幕，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/43400861/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/43400861/
</a>
</p>
页:
[1]