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

标签 css html css-position

我有一个固定位置的弹出窗口,我将其转换为页面中心。

这个窗口能够随着元素的添加而增加/减小尺寸,我想将其增长限制在窗口的 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/

相关文章:

html - 使用图像 repeat-x 固定导航

css - flex 容器中的绝对定位元素在 IE 和 Firefox 中仍被视为元素

html - 'transform3d' 不适用于位置 : fixed children

html - 让背景颜色在 div 上工作

c# - 如何在悬停时更改图像源?

html - 如何修复从移动设备查看时变得不可见的文本

html - 如何使用 html (div/span) 和 css 创建类似只读文本框的结构?

javascript - 动画进行时在同一元素上触发 jquery animate

IE 中的 HTML 表单对齐问题

javascript - 打开一个新的 javascript 窗口(.open)及其 CSS 样式