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

Question

我的背景元素有问题。我有两个 div，窗帘左和窗帘右，它们需要是浏览器高度的 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%;
}

请尝试一下这个概念。