Процентная максимальная высота на преобразованных элементах

У меня есть всплывающее окно с фиксированной позицией, которое я преобразовываю в центр на странице.Процентная максимальная высота на преобразованных элементах

Это окно способно увеличивать/уменьшать размер по мере добавления элементов к нему, и я хочу ограничить его рост до 75% окна.

В настоящее время я определяю его max-height с помощью ems, потому что, как я понимаю, когда элемент преобразуется, он вынимается из потока и поэтому больше не имеет родительского элемента для базового процента.

Есть ли какой-нибудь чистый способ css, который я могу сделать max-height этого элемента на основе общего размера окна, хотя я использую преобразование?

Edit - добавьте пример кода:

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

источник

2016-12-06 Brian Sheridan

У вас есть пример, который поможет нам визуализировать? Кроме того, вы пытались использовать 'vh' в качестве единицы измерения? – StardustGogeta

использование

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

Viewport в процентах Длины

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

источник

2016-12-06 01:51:43 dommmm

К сожалению, это не делает трюк. –

Вы можете поделиться примером своего кода? – dommmm

Несомненно, отредактировал мой вопрос с некоторыми html и всеми css на главном выцветании в окне –

Процентная максимальная высота на преобразованных элементах

ответ

Смежные вопросы