0

所以我看过这篇文章：我可以使用 CSS 按比例缩放 div 的高度吗？它有点回答我的问题。我可以根据需要按比例分配 div。但是，我还需要为这些 div 设置最小高度。

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

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

RED div 应该向上和向下缩放，但是在某个点，当 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%;
}
4

1 回答 1

-1

不幸的是，纯 CSS 无法在除 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>
于 2013-03-07T23:21:49.483 回答