Question

我有一个固定的位置弹出窗口，我转换到页面的中心。

当窗口添加元素时，此窗口的大小可以增加/减小，我想将其增长限制在窗口的75％。

目前我使用ems定义它的最大高度，因为据我所知，当一个元素被转换时，它被取出流，因此不再有父元素来基于百分比。< / p>

是否有一些纯粹的CSS方法我可以根据总窗口大小设置此元素的最大高度，即使我使用变换？

编辑 - 添加代码示例：

＆＃13;

.fade-in-container {
    text-align: left;
    display: table;
    max-height: 55em;
    width: 40em;
    transition: opacity 0.2s ease-in;
    position: fixed;
    height: 20em;
    z-index: 12;
    padding: 2em;
    background: #F1F1F1;
    border-radius: 1%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

＆＃13;

<body>
    <footer></footer>
    <div class='fade-in-container'></div>
</body>

＆＃13;

Answer 1

使用

#your-div {
    max-height: 75vh;
}

视口百分比长度

https://css-tricks.com/the-lengths-of-css/#article-header-id-12

基于百分比的转换元素的最大高度

1 个答案: