Question

当父项位置固定且高度为100vh时，如何将儿童的高度设置为自动。代码如下（class =“firstInnerDiv”是我的弹出窗口）

<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

Answer 1

如果您在flex-direction: column;规则中添加justify-content:center;并将align-items:center;更改为.maindiv，则.firstInnerDiv中的内容不会自行溢出。

＆＃13;

.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;
 }

＆＃13;

<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>

＆＃13;

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

1 个答案: