当父母的身高是100vh时，将身高设置为自动

如何将父母的身高设置为自动父母的身高是，身高是100vh。代码如下如下（类= “firstInnerDiv” 是我的弹出）当父母的身高是100vh时，将身高设置为自动

<style> 
.maindiv{ 
    position:fixed; 
    display:flex; 
    justify-content:center; 
    left:0%; 
    top:0%; 
    width:100%; 
    height:100vh; 
    overflow-y:scroll; 
    background:#8c8c8c; 
    } 

.maindiv .firstInnerDiv{ 
    padding:0px 20px; 
    margin-top:70px; 
    border-radius:18px; 
    height:auto; 
    position:relative; 
    width:80%; 
    background:#fff; 
} 
</style> 
</head> 
<body> 
<div class="maindiv"> 
<div class="firstInnerDiv"> 
<p>1. More contents will be here </p> 
</div> 
</div>

的jsfiddle如下

link to jsfiddle

来源

2017-06-22 anna poorani

'高度：100vh'是在手机上为'vh'变化问题当用户滚动下来，一切都要重新计算一次由于观众高度的变化。 –

“firstInnerDiv”是我的弹出窗口。我如何为我的整个内容填充白色背景？你有没有看到我附加的jsfiddle。无论如何感谢您的回复 –

您的CSS已经将高度设置为自动。你究竟在努力完成什么，你有什么CSS问题？ – Adrian

如果添加flex-direction: column;并在您.maindiv规则改变justify-content:center;到align-items:center;，内容在.firstInnerDiv不会自我溢出。

.maindiv{ 
 
    position:fixed; 
 
    display:flex; 
 
    flex-direction: column; 
 
    align-items:center; 
 
    left:0%; 
 
    top:0%; 
 
    width:100%; 
 
    height:100vh; 
 
    overflow-y:scroll; 
 
    background:#8c8c8c; 
 
    } 
 

 
.maindiv .firstInnerDiv{ 
 
    padding:0px 20px; 
 
    margin-top:70px; 
 
    border-radius:18px; 
 
    height:auto; 
 
    position:relative; 
 
    width:80%; 
 
    background:#fff; 
 
}

<div class="maindiv"> 
 

 
    <div class="firstInnerDiv"> 
 
    <h2>1. this is awesome</h2> 
 
    <h2>2. this is awesome</h2> 
 
    <h2>3. this is awesome</h2> 
 
    <h2>4. this is awesome</h2> 
 
    <h2>5. this is awesome</h2> 
 
    <h2>6. this is awesome</h2> 
 
    <h2>7. this is awesome</h2> 
 
    <h2>8. this is awesome</h2> 
 
    <h2>9. this is awesome</h2> 
 
    <h2>10. this is awesome</h2> 
 
    <h2>11. this is awesome</h2> 
 
    <h2>12. this is awesome</h2> 
 
    <h2>13. this is awesome</h2> 
 
    <h2>14. this is awesome</h2> 
 
    <h2>15. this is awesome</h2> 
 
    <h2>16. this is awesome</h2> 
 
    <h2>17. this is awesome</h2> 
 
    <h2>18. this is awesome</h2> 
 
    <h2>19. this is awesome</h2> 
 
    </div> 
 

 
</div>

来源

2017-06-22 19:52:29 LGSon

嗨LGson，滚动条一定不能在“firstInnerDiv”。这看起来很糟糕。滚动条必须在体内，这是常见的。 –

@annapoorani好的，更新我的回答 – LGSon

很好....谢谢 –

当父母的身高是100vh时，将身高设置为自动

回答

相关问题