Элемент высота/ширина масштабирования вопрос

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%; 
} 

Пожалуйста, дайте попробовать с этой концепцией.