Question

所以我看过这篇文章：Can I scale a div's height proportionally to its width using CSS?并且它解答了我的问题。我可以根据需要得到divs porpe plece。但是，我还需要为这些div设置最小高度。

在这个小提琴中http://jsfiddle.net/FBZuB/1/我已经设定了我想要完成的事情。 BLUE div是一个通用包装器，然后根据BLUE div的宽度定义RED div的高度。但是，当我尝试更改RED div上的最小高度时，我想要缩放的div和最小高度，会出现意外结果。

我认为一旦我将DOWN缩放到最小高度点，div就会停止缩放并且只会改变宽度。然而，似乎设置最小高度只是为整个计算设置某种基点，并且一切都在不断扩展。我希望这是有道理的。

RED divs应该向上和向下缩放，但在某一点上，当RED div达到其最小高度时，它应该停止在高度和仅宽度上缩放。我之前用纯javascript完成了这个，但是因为我读了上面的帖子，我试图得到一个只有CSS的解决方案。

这是代码。你现在可以忽略这些内容......我主要关注红色块。按比例缩放宽度/高度，直到它达到最小高度，然后它应该停止缩放高度和仅宽度。

HTML

<div style="background: blue; width: 70%;">
<div id="left">
    <div class="content"></div>
</div>
<div id="right">
</div>
</div>

CSS

div {
    margin: 5%;
    float: left;
    background: red;
    position: relative;
}
#left {
    width: 50%;
    padding-bottom: 60%;
    min-height: 100px;
}
#right {
    width: 30%;
    padding-bottom: 60%;
    min-height: 100px;
}
.content {
    position: absolute;
    width: 90%;
    margin: 5%;
    background: green;
    top: 0;
    left: 0;
    height: 90%;
}

Answer 1

不幸的是，普通的CSS无法计算所有浏览器except IE中的任何表达式，因此您必须至少使用一些JavaScript来动态计算宽度。
我可能会在你的html文件中做这样的事情。
由于你没有指定如何你正在调整你的div，我会假设它只是在窗口调整大小时。

<body onresize="
    var left = document.getElementById('left');
    if (left.clientHeight < left.style.min-height) {
        left.style.cheight = left.style.min-height;
    }
">
</body>

将SAME ROW的div按比例缩放到相同的高度＆amp;有最小高度

1 个答案: