css - 元素高度/宽度缩放问题

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;

好像只关注min-width，并没有根据缩放的高度展开。所以它适用于宽屏显示器，但在标准情况下，背景图像会扩展到 20% 的宽度，然后在底部留下一个尴尬的间距。

有什么建议吗？

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

Answer 1

编辑:删除了 jquery 解决方案。

我理解你错了，所以发布了那个，如果你尝试为该元素以及所有父元素提供 height 和 max-height 到 100% 会更好。例如

HTML:

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

CSS:

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

请尝试一下这个概念。