所以我看了这篇文章:Can I scale a div's height proportionally to its width using CSS?,它回答了我的问题。我可以根据需要让divs进行补全。但是,我还需要为这些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%;
}

最佳答案

不幸的是,普通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>

关于html - 将SAME ROW的div比例缩放到相同的高度并具有Min Height高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15262554/

10-12 12:34
查看更多