요소 높이/너비 조정 문제

Question

배경 요소에 문제가 있습니다. 두 개의 div, curtain_left 및 curtain_right가 브라우저의 높이의 100 %, 너비가 20 % 이상, 너비가 40 % 이하 여야합니다. 주요 요구 사항은 높이의 100 %까지 커튼 크기 조정입니다.

는 지금, 나는 그것은 단지 최소 폭에주의를 지불하고, 스케일링 높이에 따라 확대되지 않을 것으로 보인다

#curtain_left { 
left: 0px; 
min-width: 20%; 
max-width:40% 
height: 100%; 
text-align: left; 
z-index: -1; 
position: fixed; 
background-image: url(img/curtain_right.png); 
background-size: 100%; 
background-repeat: no-repeat; 

있습니다. 따라서 와이드 스크린 모니터에서 작동하지만 표준에서는 배경 이미지가 너비 20 %로 확장되어 바닥에 어색한 간격을 남깁니다.

모든 팁은?

http://jsfiddle.net/kJbcj/1/

Answer 1

편집 : JQuery와 용액을 제거 하였다.

당신이 틀린 걸로 이해 했으므로 모든 부모 요소와 함께 높이와 최대 높이를 100 %까지 제공하면 좋을 것입니다. 예를 들어

HTML :

<div class="wrapper"> 
    <div id="curtain_left"></div> 
</div> 

CSS :

html, body, .wrapper, #curtain_left { 
    height: 100%; 
    max-height: 100%; 
} 

이 개념 시도해주십시오.