CSS (또는 jQuery를 통해)의 최대 높이 및 최소 높이 속성 설정

Question

간단하지만 성가신 문제가 있습니다. div 요소의 min-height 및 max-height을 설정해야합니다.

예 : min-height: 100px 및 max-height: 200px. div 높이 200px로 내 페이지를로드합니다. 내 브라우저 창을 꽉 쥐면이 div는 크기가 조정되고 height=100px에 도달하면 크기 조정이 중지됩니다.

물론 CSS의 min-height 및 max-height은 작동하지 않습니다. :/

누구나?

감사합니다.

Answer 1

높이를으로 설정하십시오.

min-height: 100px; 
max-height: 200px; 
height: 100%; 

Answer 2

최소 높이는 항상 높이와 최대 높이를 덮어 쓰므로 둘 다 사용할 수 없습니다.

이것은 일종의 해킹이지만 미디어 쿼리로 수행 할 수 있습니다. 이것이 당신의 HTML 인 경우 :

<div id="myDiv"></div> 

는 그런 다음 CSS를이 추가 : 이해가 안

#myDiv{ 
    height:200px;  
} 
@media screen and (max-height: 200px) { 
    #myDiv { 
     height:99vh; /*Set this with trial and error because it depends on your margins*/ 
    } 
} 
@media screen and (max-height: 100px) { 
    #myDiv { 
     height:100px; 
    } 
}