변형 된 요소의 백분율 기반 최대 높이

페이지의 가운데로 변형되는 고정 위치 팝업 창이 있습니다.변형 된 요소의 백분율 기반 최대 높이

이 창은 요소가 추가 될 때 크기가 증가하거나 감소 할 수 있으며 창의 크기를 창의 75 %로 제한하려고합니다.

필자는 이해할 수 있듯이 요소가 변형되면 흐름을 벗어나서 더 이상 기본 요소의 부모 요소를 갖지 않으므로 ems를 사용하여 최대 높이를 정의합니다.

변환을 사용하더라도 전체 창 크기를 기반으로이 요소의 최대 높이를 만들 수있는 순수한 CSS 방법이 있습니까?

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

뷰포트 비율 길이

에게

.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

사용 : -

편집 코드 예제를 추가 10

출처

2016-12-06 01:51:43 dommmm

슬프게도 그 트릭을하지 않습니다. –

코드 예제를 공유 할 수 있습니까? – dommmm

물론, 내 질문에 편집 된 내 html과 모든 CSS를 메인 페이드에 –

변형 된 요소의 백분율 기반 최대 높이

답변

관련 문제