元素高度/宽度缩放问题

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

请试试这个概念。