我有一个固定位置的弹出窗口,我将其转换为页面中心。
这个窗口能够随着元素的添加而增加/减小尺寸,我想将其增长限制在窗口的 75%。
目前我使用 ems 定义它的最大高度,因为据我所知,当一个元素被转换时,它被从流中取出,因此不再有父元素作为百分比的基础。
即使我使用变换,是否有一些纯 css 方法可以根据总窗口大小设置此元素的最大高度?
编辑 - 添加代码示例:
.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%);
}
<body>
<footer></footer>
<div class='fade-in-container'></div>
</body>
最佳答案
使用
#your-div {
max-height: 75vh;
}
视口(viewport)百分比长度
https://css-tricks.com/the-lengths-of-css/#article-header-id-12
关于css - 基于转换元素的最大高度的百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40986471/